网页响应式屏幕设置（响应式网页模版）

现在做前端响应式网站特别，响应式成为现在前端设计一个热点，它成为热点的最主要的原因就是，移动端设备屏幕的种类多样，那么如何设置响应式屏幕。

/* 打印样式 */

@media print { color: red; }

/* 手机等小屏幕手持设备 */

@media screen and (min-width: 320px) and (max-width: 480px) { body { background: yellow; } }

/* 平板之类的宽度 1024 以下设备 */

@media only screen and (min-width: 321px) and (max-width: 1024px) { body { background: blue; } }

/* PC客户端或大屏幕设备: 1028px 至更大 */

@media only screen and (min-width: 1029px) { body { background: green; } }

/* 竖屏 */

@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}

/* 横屏 */

@media screen and (orientation:landscape){对应样式}

手机、平板设备屏幕尺寸众多，宽度不一，写手机、平板对应css时最好用百分比宽度来自适应各种大小不一的屏幕宽度。这个百分比尺寸不算太难但也不是个太轻便的活，如果你css不熟练的话最好先别折腾这块，把基础练好了来。 还有，用了css媒体查询后，ie6-8载入不了样式表，要引用个：Respond.js来让ie6-8下正确载入css。js自行百度，到处有下载。 用CSS判断横屏竖屏问题。

CSS代码如下

1、

@media (orientation: portrait) { } 横屏

@media (orientation: landscape) { }竖屏

2、 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">横屏

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">竖屏

用JavaScript判断横屏竖屏问题。JavaScript代码如下

//判断手机横竖屏状态：

function hengshuping(){ if(window.orientation==180||window.orientation==0){

alert("竖屏状态！") }

if(window.orientation==90||window.orientation==-90)

{ alert("横屏状态！") }

}

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

从而根据实际需求而执行相应的程序。通过添加监听事件onorientationchange，进行执行就可以了。

/* media */

/* 横屏 */

@media screen and (orientation:landscape){

}

/* 竖屏 */

@media screen and (orientation:portrait){

}

/* 窗口宽度<960,设计宽度=768 */

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

/* 窗口宽度<768,设计宽度=640 */

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

/* 窗口宽度<640,设计宽度=480 */

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

/* 窗口宽度<480,设计宽度=320 */

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

/* windows UI 贴靠 */

@media screen and (-ms-view-state:snapped){ }

/* 打印 */

@media print{ }

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com