css vhcss页面布局局支持手机吗

来源：蜘蛛抓取(WebSpider) 时间：2017-05-14 07:03 标签： css页面布局

响应式web设计离不开百分比。但是,CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度,而不是父元素的,那该怎么办?

vh:相对于视窗的高度:视窗高度是100vh。

vw:相对于视窗的宽度:视窗宽度是100vw。

看我!!!看我...!!!我是浏览器视窗的宽度(你可以通过改变浏览器宽度看我的变化):0

px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

(另外需注意chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。


px像素（pixel）：相对长度单位。相对于显示器屏幕分辨率而言。pc端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem。

相对于父节点的font-size，会有一些组合的问题。比如你把body的font-size定义为50%，一般地会是8px。那么你在body里字体大小就是1em=8px了。可当你定义了一个div，然后把字体设置成了75%，请问，现在的1em等于多少？这个时候你会发现，原来他继承了body的值，现在字体更小了，变成了6px！因为em是相对于父节点的单位。这么嵌套下去你会哭......(幸好出现了rem╭(′▽`)╭(′▽`)╯)

相对长度单位，指相对于根元素的字体大小的单位。rem只会相对html的值，不会受到父级的影响，这样的好处在于：从em里的例子来讲，1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的，所以ie8或以下请无视。

屏幕适配的几种方法（流式布局、固定宽度、响应式、通过viewport进行缩放、使用rem）

 在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。 流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。

   把页面设置成320的宽度，超出部分留白，这样做视觉，前端设计都挺挺开心，UI再也不用被流式布局限制自己的设计灵感了，前端也不用流式布局。但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小

响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性

难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，因为这样

反而可以节约成本，不用再专门为自己的网站做一个web app的版本。

  以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。说实话我觉得他和用接下去我们要讲的rem都非常高效，不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。

rem等比例适配所有屏幕：




我要回帖

更多关于 css页面布局 的文章

 

随机推荐