HTML5響應式頁面

資料網址 developer.mozilla.org/zh-CN/docs/…
HTML5的兼容性檢測 caniuse.com
在線檢測編寫是否符合標準 validator.w3.org

HTML/XHTML/HTML5

HTML：超文本標記語言。
XHTML：更加嚴謹的HTML。
HTML5：新一代HTML規範，可以適配端設備。
他們各自的文檔聲明
```
//
<!DOCTYPE html>
複製代碼
```

移動端1px偏差的緣由和解決辦法

1px偏差的緣由

window中有個devicePixelratio屬性（設備像素比）例如，一個手機的真實尺寸是320*568，可是它的分辨率是640*1136，它這個就2倍的DPR；他表示物理像素和css像素的比例的不一樣，在不一樣的手機上這個這個設備像素比的值不一樣，因此在css中寫1px的長度映射到物理像素就有2px或者3px的長度。

解決1px長度不一樣的方法

flexible.js解決。

flexible的原理是先獲取設備的像素比，而後根據設備的像素比來動態的設定viewport的值，讓viewport的寬度等於實際的設備物理寬度。
flexible的做用：根據屏幕分辨率大小的不一樣，調整根元素html中的font-size，從而達到適配移動端。
通常flexible只是用於設置viewport的值，爲了方便會搭配px2rem-loader使用，他是px自動轉rem的插件。

僞類+transform解決

在父級元素設置相對定位，子元素利用絕對定位和transform:scale實現。

<div class="father">
    <div class='top'></div>
    <div class='center'></div>
    <div class='bottom'></div>
</div>
//樣式
.father{
    position:relative;
    margin:20px 100px;
}
.top::after{
    position:absolute;
    content:'';
    pointer-events:none;
    /*元素永遠不會成爲鼠標的點擊事件*/
    top:-50%;
    left:-50%;
    bottom:-50%;
    right:-50%;
    transform:scale(0.5);
    border:1px solid red;
}
.center::after{
    position:absolute;
    top:-50%;
    bottom:-50%;
    left:0;
    right:0;
    transform:scale(1,0.5);
    border:1px solid darkcyan;
    boeder:solid tansparent solid tansparent;
}
.bottom::after{
    position:absolute;
    content:'';
    bottom:0;
    left:0;
    right:0;
    tansform:scale(1,0.5);
    border-bottom:1px solid yellow;
}
複製代碼

安卓瀏覽器看背景圖，有些設備會模糊。

給圖片設置background-size:contain後圖片變清晰。

.logo{
    background-image:url(src/assets/logo.png);
    background-size:contain;
    width:24px;
}
複製代碼

rem響應式佈局開發（等比縮放佈局）

css經常使用的單位
- px 像素固定單位。
- em 相對單位，相對於父元素的字體大小設定的單位。
- rem 相對於當前頁面根元素（html）的字體大小設定的。
- % 相對於父元素的百分比。

開發操做方法一先設定根目錄並利用函數計算。

- 第一步： 拿到設計稿後（通常是750px的)，咱們設定一個初始的REM和PX的換算比例。（通常是1rem=100px爲了方便後期換算）
- 第二步：測量出設計稿中元素的尺寸（PS測出來的是PX單位），在編寫樣式的時候所有轉爲REM單位除以100，這個也叫作100%還原設計稿。
- 第三步：編寫一段JS，獲取當前設備的寬度，讓其除以設計稿的寬度（750），再乘以初始的換算比例100，計算出當前設備下，1REM等於多少像素，（只要改變HTML中的font-size就能夠了，font-size一改，全部的rem單位的元素都會跟着自動變化）
    ```
        function computedREM(){
            let htmlWidth = document.documentElement,
                winW = htmlWidth.clientWidth;
                htmlWidth.style.fontSize = winW/750*100+'px'
        }
        computedREM()
        window.addEventListener('riseze',computedREM)
    ```
- 第四步：主體響應式佈局rem爲主，部分效果實現能夠基於Flex來作，微調還能夠基於@media來完成。
複製代碼

開發操做二利用vw

首先要先說明：移動端的設計稿通常是width：750px，height：auto（這裏指的是不肯定），100vw = 100%，這個也沒有問題吧；那麼，設計稿拿過來，咱們能夠得出：750px = 100vw，這個也沒有問題吧，那麼1px等於多少vw呢？是否是 1px = 100 / 750 vw = 0.13333vw；那麼100px = 多少vw呢，這個應該知道了吧。100px = 13.33vw；

上下拉動滾動條時卡頓、慢。

在body裏設置overflow-scrolling:touch

H5的新特性

語義化標籤
- header
- footer
- nav
- dialog
加強型表單-input中的type
- color 主要用於選取顏色
- data 從日期選擇器中選擇一個日期
- number 數值的輸入域
- search 用於搜素
H5表單新增屬性
- placehoder 輸入提示框
- multiple 規定input元素中可多選
H5新事件
- onresize 當調整窗口大小時觸發函數
- ondrag 當拖動元素時觸發函數
- onerror 當錯誤發生時觸發函數
- onplay 當媒介數據將要開始播放時觸發函數
- onpause 當媒介數據暫停時觸發函數

移動端H5常見知識點

HTML5響應式頁面

HTML/XHTML/HTML5

移動端1px偏差的緣由和解決辦法

1px偏差的緣由

解決1px長度不一樣的方法

flexible.js解決。

僞類+transform解決

安卓瀏覽器看背景圖，有些設備會模糊。

rem響應式佈局開發（等比縮放佈局）

開發操做方法一 先設定根目錄並利用函數計算。

開發操做二 利用vw

上下拉動滾動條時卡頓、慢。

H5的新特性

開發操做方法一先設定根目錄並利用函數計算。

開發操做二利用vw