關於Html5移動端適配不同解析度的布局總結

關於現在比較流行的一些框架比如bootstrap，用得多的人會發現bootstrap確實在做扁平化風格的**方面，提供了很大的便利，適配不同解析度的pc端，包括能適配到移動端。但是就我個人而言，從pc端適配到移動端這種一整套的方式還是有所不妥的，畢竟pc端顯示的內容相對於移動端來說是很多很繁瑣的，而移動端顯示的風格大多以扁平化為主，螢幕顯示的內容也不宜過多過於繁瑣，所以要想直接從pc端適配到移動端的這一整套流程下來，只適用於一些內容不多的扁平化小**。

好了進入主題，今天主要說說html是怎麼適配不同解析度的手機的，bootstrap雖然適配了整個螢幕的大小，但是你會發現，無論在哪個解析度底下，字型的大小都是不會變的，沒有做到不同的分線率顯示不同的字型大小，這會造成乙個問題，比如說在iphone6的螢幕解析度下，可以正常顯示一段文字，但是在iphone5的螢幕解析度比較小，那麼那段文字顯示就會出現異常，這種情況在開發的過程中經常會出現。

那麼怎麼讓文字適配不同解析度呢，不多說直接上**：

@media screen and (min-width: 320px) }

@media screen and (min-width: 360px) }
@media screen and (min-width: 375px) }
@media screen and (min-width: 400px) }
@media screen and (min-width: 414px) }
@media screen and (min-width: 440px) }
@media screen and (min-width: 480px) }
@media screen and (min-width: 520px) }
@media screen and (min-width: 560px) }
@media screen and (min-width: 600px) }
@media screen and (min-width: 640px) }
@media screen and (min-width: 680px) }
@media screen and (min-width: 720px) }
@media screen and (min-width: 750px) }
@media screen and (min-width: 760px) }
@media screen and (min-width: 800px) }
@media screen and (min-width: 960px) }

那要怎麼應用呢，主要是在單位的應用上，這裡推薦使用rem，對rem不熟的朋友可以先去了解一下，如下給乙個布局的例子，

比如在iphon6的解析度為375，那麼

.p

HTML5移動端適配

基準html 機型寬度 可視區域 螢幕比例 html font site 元素寬度 px 元素寬度 rem iphone6 plus 基準 414px 110px 200px 10rem iphone6 375px 375 414 0.9057 375 414 10 9.058 px iphone5...

Html5移動端網頁端適配 js rem

業務場景 由於需求是適配兩端螢幕，所以剛開始想的css用rem寫，但是還是會出現字型和布局不會等比縮放的情況，後來找到一種js 針對根元素去做的縮放配置，加上rem和這個js的設定就能做到等比縮放。在這裡插入描述 在這裡插入描述 重啟，效果圖 在這裡插入描述 2.新建乙個index.js，把下方 複...

HTML5移動端優化

手機端筆記 float在渲染時計算量比較大，儘量減少使用 過多的font size引發css樹的效率 a 避免不必要的dom操作 b 盡量改變class而不是style，使用classlist代替classname c 避免使用document.write d 減少drawimage meta na...