移動端螢幕適配

方法一：

**查詢：

比如說我們設定了html，然後給具體的dom設定p，其實就相當於設定了p，也就是1rem = 1*(html的fontsize)，2.5rem=2.5*(html的fontsize)

html@media only screen and (min-width:360px)}

@media only screen and (min-width:375px)}
@media only screen and (min-width:400px)}
@media only screen and (min-width:414px)}
@media only screen and (min-width:480px)}
@media only screen and (min-width:540px)}
@media only screen and (min-width:640px)}
@media only screen and (min-width:768px)}
@media only screen and (min-width:960px)}
@media only screen and (min-width:1024px)}

簡而言之，就是頁面元素的位置隨著螢幕尺寸的變化而變化，通常會用百分比來定位，而在設計上需要預留一些可被「壓縮」的空間。

方法三：

樣式縮放：

最省事的適配方法，直接用px為單位按視覺進行開發，然後通過計算螢幕與網頁的寬高比，用transform:scale來對網頁進行全域性縮放。

不過此方法會有乙個小問題，就是如果網頁內有動畫的話，縮放後會稍微降低頁面效能，在低配的安卓機器上表現的比較明顯，ios上沒發現有效能問題。

方法四：

流式布局：高度用px，寬度用百分比來寫，可以固定一部分（比較重要的）為固定寬度，另一部分寬度自適應。

方法五：

彈性布局(css3)：

父級標籤中

*firefox 字首：-moz-

*opera 字首：-o-

子級標籤中

子級固定寬度

子元素會按比例平分父級內容部分剩下的寬度

注：移動端切圖中能用彈性布局則不要用float

移動端注意的規則：

移動端螢幕適配

rem單位介紹 rem font size of the root element 是相對長度單位。相對於根元素 即html元素 font size計算值的倍數 移動端主要根據iphone5來參考適配，在谷歌瀏覽器中，1rem 16px iphone5的寬度是320px,320 16 20 動態設定...

移動端螢幕適配 （ media ）

media screen and max width 300px media queries能在不同的條件下使用不同的樣式，使頁面在不同在終端裝置下達到不同的渲染效果。前面簡單的介紹了media queries如何引用到專案中，但media queries有其自己的使用規則。具體來說,media q...

Vue移動端螢幕適配

第一步 在src路徑下新建乙個js資料夾，在建立乙個resize.js檔案 第二部 在resize.js檔案內寫入以下 function doc,win if doc.addeventlistener return domcontentloaded是firefox下特有的event,當所有dom解析...