寫phpd的我。

近期公司要弄個app關鍵是沒有web開發，而我有比較閑，那就扛槍上陣吧。

響應式布局，web端的？php我一直都是用tp框架，對于web首先想到的是bootstrap框架。僅僅是簡單了解過，沒真正實踐啊。bootstrap比我想象的要好用的多。關鍵是。關鍵來了……

app端是僅僅有手機的，pc基本上木有。那就是說僅僅能依照手機端開發，那么boostrap響應式布局就不適用于app了（反正我是做了一套半成品，被推翻了）。不能愉快的工作了。好不淡定的時間。

。百度。百又問問同事。發現了amaze ui也就是妹子框架，最終能夠省事了，太高興了。

amaze框架下載后是一套讓人極其郁悶的演示樣例包。文件引入是分開來介紹的。假設你不細致看文檔，會非常痛苦的（由于我就是如此，好折磨人）。

好了附上amaze的引入文件，僅供大伙參考。

對了手機端要在頭部加上這句話

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

一切就緒。那就直奔主題。

手機端眼下最低寬度是300.只是說實話智能手機300的屏幕預計是木有，那就按iphone4的320來設計web。那么問題來了，設計給的參考圖示640的腫么辦，全部的像素除以2。一切解決。

使用amaze框架并不能非常好的解決不同分辨率的像素問題。并且最苦逼的就是要設置好多@media only screen and (min-width:320px) and (max-width:480px) {}屏幕范圍樣式。太痛苦了。受不了。。有木有一種能夠控制的方法呢，京東是怎么弄的？小米又是怎么弄的？百度吧。一切從度娘中找答案。

?

答案好多，慢慢篩選吧……

?

于是找到這段代碼

?

那么問題來了，這僅僅是頁面的，我想要全部的地方在不同尺寸的瀏覽器都能自適應，怎解決？

clientwidth是獲取屏幕顯示的寬度。設定最小屏幕為320。以320為基礎。那么最小最字體就是12px。于是就有了修改。

?

好了這下子不管什么瀏覽器都是以最寬320，最小12px為基準。

接著還有個問題，全部布局改用什么單位？px/em/pt/rem

px是最精確的單位,固定值。

em值不固定。繼承父元素。rem在設定元素時仍是相對大小，但相對的是html根元素。pt就是印刷業上的單位。只是app開發中也用到。

那么好了，該用哪種的呢。我們先來看看上面的自適應js運行效果。

在html元素中生成了一個行內字體樣式，答案就有了吧。

?

轉載請注明出處:??web前端響應式布局，自適應全部分辨率→艾瑞可erik(http://www.erik.xyz/)

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的web前端响应式布局,自适应全部分辨率的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。