关于响应式设计

来源：互联网发布：淘宝卖家如何上传图片编辑：程序博客网时间：2024/05/16 11:55

响应式设计就两个关键点，一是不修改DOM结构调整布局。二是根据不同的屏幕应用不同的CSS。

不修改DOM结构调整页面布局的关键是流式布局。宽度用百分比（也有人用em）；

根据不同屏幕应用不同的CSS 需要用到的是HTML5提供的一种新的CSS语法——@media；

@media only screen and (max-width: 640px) {   }

上面这段代码的意思是当屏幕宽度小于等于640像素时应用大括号中的样式。

@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape)

浏览器宽度在321-480像素之间，且方向是“横向”时生效。

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

判断终端的像素比是2的话，所渲染的样式。可以适用于iPhone4，iPhone5等设备。

然后在 html上增加一个viewport的meta标签，否则在手机上可能会有页面自动缩放的情况；

<meta name="viewport" content="width=device-width; initial-scale=1.0">

0 0