前端响应式设计中@media等的相关运用

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

/*打印样式*/

@mediaprint{color:red;}

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

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

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

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

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

@mediaonlyscreenand(min-width:1029px){body{background:green;}}

/*竖屏*/

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

/*横屏*/

@mediascreenand(orientation:landscape){对应样式}

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

CSS代码如下

1、

@media(orientation:portrait){}横屏

@media(orientation:landscape){}竖屏

2、<linkrel="stylesheet"media="alland(orientation:portrait)"href="portrait.css">横屏

<linkrel="stylesheet"media="alland(orientation:landscape)"href="landscape.css">竖屏

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

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

functionhengshuping(){if(window.orientation==180||window.orientation==0){

alert("竖屏状态！")}

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

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

}

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

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

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

/*media*/

/*横屏*/

@mediascreenand(orientation:landscape){

}

/*竖屏*/

@mediascreenand(orientation:portrait){

}

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

@mediascreenand(max-width:959px){}

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

@mediascreenand(max-width:767px){}

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

@mediascreenand(max-width:639px){}

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

@mediascreenand(max-width:479px){}

/*windowsUI贴靠*/

@mediascreenand(-ms-view-state:snapped){}

/*打印*/

@mediaprint{}

以下内容已过滤百度推广

media screen 百度翻译|百度词典

Web 开发技巧: 使用 CSS @media 规则
2007年10月8日 - 何时定义 screen 媒体类型css @media 规则非常适合于将 html 或 xml 文档定位为目标输出方法。目前,print 媒体的使用非常普遍,与实现单独的 “可打印版本” 相比,...  普通

运用@media实现网页自适应中的几个关键分辨率_百度经验
2014年12月18日 - 经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题。到底分辨率...  普通

实例讲解@media与@media screen的区别 - 网站运营_卡卡网
2015年9月6日 - 在网站自适应设计中,@media与@media screen是必须用到的css代码,可能大家对此并不陌生。但是大家又知不知道@media与@media screen的区别在哪呢?在自适...  普通

利用@media screen实现网页布局的自适应 - 神马和浮云 - 博客园
2015年5月26日 - 利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在css中添加@media screen属性,根据浏览...  普通

@media screen 针对不同移动设备 | 前端开拓者
2016年7月21日 - @media screen针对不同移动设备-响应式设计 概念: device-pixel-ratio:定义输入设备屏幕的可视宽度与可见高度比率。 device-width:输入设备屏幕的可视...  普通

利用@media screen实现网页布局的自适应 | 小蝴蝶
2013年2月19日 - @media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px} } @media screen and (min-...  普通

利用@media screen实现网页布局的自适应,@media screen and_div+...
2014年3月11日 -  意思是当屏幕的宽度大于600小于800时,应用styleb.css 另一种方式,即是直接写在标签里: @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px...  普通

CSS3 @media查询 | 菜鸟教程
css3 @media 查询 实例 如果文档宽度小于 300 像素则修改背景演示(background-color): @media screen and (max-width: 300px) {    body {...  普通

利用@media screen实现网页布局的自适应 - 博客频道 - CSDN.NET
@media screen and (max-width: 960px){ body{ background: #000; } } 这个应该算是一个media的一个标准写法,上面这段css代码意思是:当页面小于960px的时候...  普通