现在做前端响应式网站特别，响应式成为现在前端设计一个热点，它成为热点的最主要的原因就是，移动端设备屏幕的种类多样，那么如何设置响应式屏幕。
/* 打印样式 */
@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