码迷,mamicode.com
首页 > 其他好文 > 详细

自适应和响应式区别以及写法

时间:2017-11-10 18:55:07      阅读:282      评论:0      收藏:0      [点我收藏+]

标签:限制   滚动   overflow   eve   显示   覆盖   展现   调整   多点   

自适应:

 在不同分辨率下不同设备上显示相同的页面。即:根据屏幕的宽度,自动调节网页内容的大小,使其主体内容和布局不变。

响应式:

响应式的概念应该是覆盖了自适应,但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局。

(1)允许网页的宽度自动的调整

(2)尽量少使用绝对的宽度,多点百分比

(3)相对大小的字体:字体不要使用px写死,最好使用相对大小的em,或者高清方案rem,这个不限制与字体,别的属性也可以这么设置

(4)流式布局,float等float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

(5)选择加载css,<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />,这个意思是如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

 

自适应和响应式区别以及写法

标签:限制   滚动   overflow   eve   显示   覆盖   展现   调整   多点   

原文地址:http://www.cnblogs.com/zxhh/p/7815572.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!