关于响应式布局

 

一、无论是在进行web还是移动端页面设计的时候，我们都会遇到不同界面尺寸下的样式展现问题，针对这个问题，大致有一下几种解决方案。

 

二、流布局

定义元素的float属性，然后界面会自动适配，这是最为简单的。但是针对性不强，个别情况还是会导致布局紊乱。

 

三、百分比布局

百分比布局方式的原理是，不管你页面尺寸有多大，我只占有固定的百分比，从而达到适配不同界面的效果。

但是这种方式在p元素是基本能可行（文字会自动换行）。当遇到其他的页面元素时，比如图片：会导致页面放大时会导致不同程度的拉伸。

解决方案：可以设置min-width  和 max-width 来进行固定

 

四、多媒体方式来动态设置样式

@media screen and {min-width:100px} and {max-width:200px} 

使用这种方式的时候首先要声明

<meta name="viewport" content="width=device-width" />

然后根据screen处于不同的区间来定义不同的样式（是从新写样式）

存在问题：web端还好点，但是移动端会有很多的屏幕尺寸，不同型号，不同品牌也不一样。这样就会导致样式定义复杂。（有多少种情况你的样式就要乘以多少）

 

五、利用rem的特性进行变动

这个的院里跟上面的差不多。不同的是：@media是重新写样式，rem的方式是根据不同的情况来动态改变html根元素的font-size 的数值

只要掌握好比例，这个是比@media方便的

 

 

 

 

 

 

也欢迎登录我的个人网站，里面有更多的文章及技术咨询在等你：http://www.guangmuhua.com