胡博君浅谈HTML5中的响应式布局

通过媒体查询的设置，我们可以根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。具体的使用方法有以下两种：

1、通过link标签：

<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="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