移動端適配方案

最簡單的移動端適配方案(rem+vw)

通常設計稿為750寬度，螢幕總寬度為100vw

那麼：100vw = 750px * 1px

1px = 100 / 750

1px就等於0.13333333vw

把單位放大100倍便於計算

html

設計稿單位/100，直接將px單位向左移2位就可以

又因為單位是以螢幕寬度為基準計算，當裝置寬度過大時，計算出的rem值的顯示也越大，加上下面樣式限定

@media (min-width: 560px) 

}

我們計算出iphone6螢幕寬度375：

設計稿375px情況下 1rem=100px

設計稿480px情況下 1rem=78.125px

設計稿600px情況下 1rem=62.5px

設計稿750px情況下 1rem=50px

按iphone6螢幕尺寸，設計稿750px還原，讓頁面能夠在其他尺寸下盡量顯示正常

css尺寸計算方式為：設計稿中元素尺寸/100rem

參考：

【移動端適配方案一 彈性布局】@media標籤+rem+viewport實現移動端螢幕適配

移動前端開發之viewport的深入理解

@charset "utf-8";

/*1、寫入css的尺寸/螢幕寬度 = ui圖標註的尺寸/ui圖寬度
即：寫入css的尺寸 = (ui圖標註的尺寸*螢幕寬度)/ui圖寬度
2、我們將根元素設定為100px，則1rem=100px
然而為了不失真要計算出對應的比例，於是1rem = 螢幕寬度/ui設計圖寬度*100px
即：螢幕640px，給的設計稿寬640px，那麼這種情況下1rem就表示100px
如果螢幕320px，給的設計稿寬640px，那麼這種情況下1rem就表示50px
要想做成響應式，只需要配合@media計算好對應螢幕下html font-size的值。
當然為了好計算，我們全部以100px為基準
3、於是：寫入css的尺寸 = ui圖標註的尺寸/100px*1rem
*/@media (min-width: 240px) 
}@media (min-width: 320px) 
}@media (min-width: 360px) 
}@media (min-width: 375px) 
}@media (min-width: 384px) 
}@media (min-width: 411px) 
}@media (min-width: 414px) 
}@media (min-width: 424px) 
}@media (min-width: 480px) 
}@media (min-width: 540px) 
}@media (min-width: 640px) 
}@media (min-width: 720px) 
}@media (min-width: 750px) 
}@media (min-width: 768px) 
}@media (min-width: 800px) 
}@media (min-width: 980px) 
}@media (min-width: 1024px) 
}@media (min-width: 1080px) 
}@media (min-width: 1152px) 
}@media (min-width: 1366px) 
}@media (min-width: 1440px) 
}@media (min-width: 2160px) 
}

var body = document.body;

alert(body.getattribute('style'));

body

解決方案如下：

(function())();

移動端使用者設定字型放大導致的問題

移動端適配方案

先來看下目前iphone各個型號尺寸和解析度 我們所能看到的手機端瀏覽器的可視視窗大小 viewport分為三種 layout viewport 布局檢視 移動裝置瀏覽器認為自己必須能夠讓所有 都顯示 即便那些不是為移動瀏覽器設計的 所以設計了乙個大於螢幕尺寸的viewport 用來相容那些不是為移...

移動端適配方案

尺寸 超小屏 768以下 小屏 768 992 中屏 992 1200 寬屏 1200以上 適配方案 適配細節 在網頁 的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 i...

移動端適配方案

具體實現 1先檢視設計稿的寬度，比如說750px的二倍設計稿，我們可以根據自己的實際情況分成10份 20份 1份就是html的font size的大小，他就是rem這個相對單位的基準值 分10份，1rem 75px 37.5px 2使用上一步的基準值,把設計稿中各元素的寬高，填充，間距，字型大小，這...