首页 > 代码库 > 胡博君浅谈HTML5中的响应式布局
胡博君浅谈HTML5中的响应式布局
1、通过link标签:
<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href=http://www.mamicode.com/"testcssbywidth1.css" />
2、CSS中直接设置:
@media screen and (max-width:479px) {
/* 具体的CSS属性设置 */
}
正常我们需要响应式Web设计的页面,在页面中都要加上viewport的设置:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi">
width=device-width:控制viewport的宽度,可以指定固定的值或者特殊的值,如device-width(设备宽度)。但是这个么设置有一个弊端,因为这个设置只有在竖屏状态下有
效,横屏状态下,返回的却还是和竖屏状态下一样的宽度。
initial-scale=1.0:告诉浏览器初始化页面时不要对页面进行任何缩放的操作。
maximum-scale=1.0:告诉浏览器阻止页面放大,但是这样一来也禁止了用户手动放大或缩小页面,怎么说呢,美好的东西也会存在缺陷吧。
minimum-scale=1.0:告诉浏览器阻止页面缩小,同样带来上面的问题。
user-scalable=no:告诉浏览器禁止页面缩放。
target-densitydpi=device-dpi:分辨率的设置,通常可以取值:device-dpi(使用设备自身的dpi作为目标dp,不发生缩放)、high-dpi(使用高分辨率,中低分辨率场景下会相
应缩小)、medium-dpi(使用中等分辨率,高低分辨率分别进行相应的放大和缩小,缺省值)、low-dpi(使用低等分辨率,中高分辨率相应放大)。
总结:设置了以上两个部分,就可以做简单的响应式布局了,记得一般手机的屏宽像素在320-640px之间,所以做布局的时候用max-width:640px;。这样的话就可以让宽度自适应了。
欢迎大家收看我的在线Java全套免费教学超清视频:
http://v.youku.com/v_show/id_XODQ1NjU0NDc2.html 这是其中的一个视频连接,大家可以拖动到优酷视频下方,订阅我的账号,因为以后我会有更多视频免费提供
百度搜索:输入Fcs_D调的码农 ,或者输入"胡博君"就能看到我的很多视频
或者加我的微信号:fcsboy 我可以及时通过微信通知你们
QQ学习群:237053693
胡博君浅谈HTML5中的响应式布局