前端响应式设计中@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代码以下

一、

@media(orientation:portrait){}横屏

@media(orientation:landscape){}竖屏

二、<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的时候...  普通