web前端响应式布局,自适应全部分辨率

写phpd的我。

近期公司要弄个app关键是没有web开发，而我有比較闲，那就扛枪上阵吧。

响应式布局，web端的？php我一直都是用tp框架，对于web首先想到的是bootstrap框架。仅仅是简单了解过，没真正实践啊。bootstrap比我想象的要好用的多。关键是。关键来了……

app端是仅仅有手机的，pc基本上木有。那就是说仅仅能依照手机端开发，那么boostrap响应式布局就不适用于app了（反正我是做了一套半成品，被推翻了）。不能愉快的工作了。好不淡定的时间。

。百度。百又问问同事。发现了amaze ui也就是妹子框架，最终能够省事了，太高兴了。

amaze框架下载后是一套让人极其郁闷的演示样例包。文件引入是分开来介绍的。假设你不细致看文档，会非常痛苦的（由于我就是如此，好折磨人）。

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

对了手机端要在头部加上这句话

一切就绪。那就直奔主题。

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