web前端響應式佈局,自適應所有分辨率

寫phpd的我。php

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

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

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

。百度。百又問問同事。發現了amaze ui也就是妹子框架,最終可以省事了,過高興了。bootstrap

amaze框架下載後是一套讓人極其鬱悶的演示樣例包。文件引入是分開來介紹的。假設你不細緻看文檔,會很是痛苦的(因爲我就是如此,好折磨人)。瀏覽器

好了附上amaze的引入文件,僅供大夥參考。app

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

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

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

手機端眼下最低寬度是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/)

相關文章
相關標籤/搜索