寫phpd的我。

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

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

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

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

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

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

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

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

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

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

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

?

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

?

于是找到這段代碼

?

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

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

?

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

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

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

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

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

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

?

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。