柚子快報激活碼778899分享：前端兼容 適配
柚子快報激活碼778899分享：前端兼容 適配
一、瀏覽器
1、內(nèi)核
瀏覽器內(nèi)核優(yōu)缺點IEtrident不安全Chromewebkit -> blink速度快，有兼容safriwebkit有兼容firefoxgecko功能強大 耗性能Operapresto -> blinkpresto 速度快，有兼容
2、瀏覽器兼容
1、html兼容
超鏈接訪問過后hover樣式不再出現(xiàn) 解決方案：修改順序 L-V-H-A a:link a:visited a:hover a:active 字體大小不一致：14px: IE16，下留白3px; firefox17：上留白1，下留白3 解決：設(shè)置統(tǒng)一行高 html{ font-size: 14px; line-height: 14px; } IE10,11input輸入內(nèi)容后出現(xiàn)‘x’ input::-ms-clear{display: none;} IE8不支持canvas：下載Google出的Excanvas.js庫IE不支持html5：借用前輩封裝好的js庫— html5shiv.js
2、css兼容
css hack
條件注釋法
選擇器前綴法
*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...} 只對IE6/7生效
@media \0screen {body { background: red; }} 只對IE8有效
@media \0screen\,screen\9{body { background: blue; }} 只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效等等
IE不支持css3新屬性：投影 漸變 旋轉(zhuǎn) 圓角 解決：前綴
-webkit-: safri
-moz-: firefox
-o-: opera
-ms-: IE
-webkit-box-shadow: #000 0px 1px 2px;
-moz-box-shadow: #000 0px 1px 2px;
-ms-box-shadow: #000 0px 1px 2px;
-o-box-shadow: #000 0px 1px 2px;
box-shadow: #000 0px 1px 2px;
不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不同
通配符：*{margin:0;padding:0;}
IE6雙邊距問題： 元素float后，設(shè)置margin；ie6中顯示的magrin比設(shè)置的大，后面的元素被頂?shù)较乱恍?/p>
解決：在float元素上設(shè)置：display：inline；
圖片有默認(rèn)邊距：
1.把圖片變成塊級元素：display:block
2.把圖片設(shè)置成左浮動：float:left
3.把圖片父元素的字體大小設(shè)置為0
4.如果父元素下，只有一張圖片，將父元素高度設(shè)置成和圖片高度一致即可。
5.給圖片設(shè)置：vertical-align:middle
IE9以下不能使用opacity屬性
.box {
/* 一點其他的樣式... */
background-color: #000;opacity: 0.5;
/* 兼容Firefox瀏覽器 */
-moz-opacity: 0.5;filter: alpha(opacity=50);
/* IE6 */
filter: progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=50);
}
min-height不兼容
{ min-height: 200px; height: auto !important; height: 200px; overflow:visible;}
text-align居中問題
margin-left: auto;margin-right:auto;
cursor:hand; safari不支持：
cursor: pointer;
IE8以下不支持css3的background-size屬性：使用filterIE8不支持CSS媒體查詢：
Respond.js可幫助IE6-8兼容 “min/max-width” 媒體查詢條件
邊距重疊問題：
兩個元素都設(shè)置了margin，顯示最大的一個：一個盒子設(shè)置div包裹
標(biāo)簽的高度小于10px，IE6,IE7 顯示的比實際高
設(shè)置overflow：hidden 或者line-height 的值小于元素高度
兩個塊級元素，父元素設(shè)置了overflow:auto；子元素設(shè)置了position:relative ;且高度大于父元素，在IE6、IE7會被隱藏而不是溢出；
解決方案：父級元素設(shè)置position:relative
IE最小寬高不生效：IE不識別min-這個屬性
#box {
width: 80px;
height: 35px;
}
html>body #body {
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
3、js兼容
事件綁定：獲取event對象獲取event事件源對象阻止冒泡阻止默認(rèn)行為獲取滾輪距離訪問父節(jié)點innerText的問題
if (navigator.appName.indexOf("Explorer") > -1){
document.getElementById("element").innerText = "text"; // IE
} else {
document.getElementById("element").textContent = "text"; // 其他
}
類型瀏覽器IE其他解決事件綁定、刪除attachEvent、detachEventaddEventlistener、removeEventListener事件對象window.eventev事件源對象srcElementtarget阻止冒泡cacelBuble = truestopPropagation阻止默認(rèn)事件returnValue = falsepreventDefault獲取滾輪距離body.scrollTopdocument.documentElement.scrollTopdocument.documentElement.scrollTop \\document.body.scrollTop訪問父節(jié)點parentNode、parentElementparentNode統(tǒng)一使用parentNodeinnerText問題innerTextcontentText獲取鍵盤碼e.whiche.keyCodee.keyCode\\ e.which
4、運行機制
單線程 宏任務(wù)微任務(wù) 異步 事件循環(huán)
3、移動端兼容 ios和android
ios端 new Date() 問題
問題描述： ios規(guī)定日期要以“ / ”分割，而不能用“ - ”。 比如在ios：new Date(‘2023-01-01 00:00:00’) 會返回NaN（在pc端safari是Invalid Date） 解決辦法： 改用“/”分割，例如：new Date(‘2023/01/01 00:00:00’) **替換字符串： **new Date(“2023-01-01 00:00:00”).replace(/-/g, “/”);
ios端 h5返回不刷新頁面
問題描述： ios端打開h5頁面后，從a頁面跳轉(zhuǎn)到b頁面，然后再返回a頁面之后，發(fā)現(xiàn)a頁面沒有刷新。貌似是ios會在瀏覽網(wǎng)頁后生成一個類似快照的東西，當(dāng)返回時，直接調(diào)用這個快照進(jìn)行展示，從而提高性能。安卓手機的h5返回時都會刷新，ios好像是部分機型也會刷新。 但是如果我們需要在返回時重新獲取下最新的信息，這個機制就會存在bug。 解決辦法：
//pageshow里的 persisted 屬性 表示該頁面是否從瀏覽器緩存中讀取。
window.addEventListener('pageshow', function (event) {
if (event.persisted) {
//重載頁面或者刷新數(shù)據(jù)
}
});
移動端媒體自動播放
二、適配
常用單位 px 固定的單位； em 是根據(jù)其父元素的字體大小來設(shè)置（太多的不確定性）； rem 是根據(jù)網(wǎng)頁的根元素（html）來設(shè)置字體大小。 vw window.innerWidth 的數(shù)值的 1% vh window.innerHeight 的數(shù)值的 1% rpx: （小程序單位）可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
1、靜態(tài)布局：pc端
2、根據(jù)不同的分辨率加載不同的css樣式文件，自適應(yīng)布局
3、媒體查詢
link元素中的CSS媒體查詢
css3設(shè)置
viewport：視口
width=device-width:就將布局視口設(shè)置成了理想的視口。
initial-scale：[0,10] 初始縮放比例，1表示不縮放
maximum-scale：[0,10] 最小縮放比例
maximum-scale: [0,10] 最大縮放比例
user-scalable: yes／no 是否允許手動縮放頁面，默認(rèn)值為yes
語法：
/* 大屏幕 */
@media only screen and (min-width:1200px) {
對應(yīng)的樣式
}
/* 中等屏幕 */
@media only screen and (min-width: 992px)and (max-width: 1199px) {
對應(yīng)的樣式
}
/* 小屏幕 */
// 頁面大于 768px， 小于 991px 時顯示的樣式效果
@media only screen and (min-width: 768px)and (max-width: 991px) {
對應(yīng)的樣式
}
/* 手機端顯示 */
// 屏幕小于 767px 時的樣式
@media only screen and (max-width: 767px) {
對應(yīng)的樣式
}
4、rem布局(移動端)
1、媒體查詢結(jié)合rem布局
媒體查詢動態(tài)修改根元素的大小，使得rem 一直在跟著變化，響應(yīng)式就成功了。
2、flexble.js和rem布局：
它的原理是把當(dāng)前設(shè)備劃分為10等份,但是不同設(shè)備下,比例還是一致的。 我們要做的,就是確定好我們當(dāng)前設(shè)備的html文字大小就可以了 下載地址：https://github.com/amfe/lib-flexible
1.下載flexible.js放到項目目錄里去 2.引入flexible.js
css文件
body {
min-width: 320px;
max-width: 750px;
/* flexible 給我們劃分了 10 等份,所以應(yīng)該是10rem */
width: 10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background: #f2f2f2;
}
3、vw+vh+rem屏幕適配方案
1. vw、vh是基于視口的布局方案，故這個meta元素的視口必須聲明。（解決寬高自動適配）
2. rem布局-解決字體適配
rem布局原理：根據(jù)CSS的媒體查詢功能，更改html根字體大小，實現(xiàn)字體大小隨屏幕尺寸變化。
@media only screen and (max-width: 1600px) and (min-width: 1280px){
html{
font-size: 14px;
}
}
@media only screen and (max-width: 1280px) and (min-width: 960px){
html{
font-size: 12px;
}
}
@media only screen and (max-width: 960px){
html{
font-size: 10px;
}
}
3. vw、vh、rem的使用
5、百分比布局 (流式布局)
1.左側(cè)固定右側(cè)自適應(yīng)-定位 2.浮動+觸發(fā)BFC 3.flex布局
柚子快報激活碼778899分享：前端兼容 適配
參考閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
UMKA出海優(yōu)選倉
