欢迎访问web记录!每一步的成长都是一种幸福,聪明的女孩擅长记录幸福!
您现在的位置:web记录 > 前端开发 >

响应式布局使用@media screen解决移动web开发的多分辨率问题

更新时间:2015-07-03 浏览次数:

响应式布局简明示例,响应式布局最好同时也是自适应布局,然后再配合css3媒体查询,来达到完美的响应式布局。

css3的媒体查询ie9一下是不支持的,这太遗憾了,不过幸运的是有大神已经为前端屌丝们写好了用于IE9以下的媒体查询脚本文件,引用方式如下:

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

 

比如在移动端、手机上打开这个网页的话,如果做响应式布局,还要在head区域加上如下代码:

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />   
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=yes"/>
<meta name="msapplication-tap-highlight" content="no" />

如果不是很明白,就直接粘贴过去使用就可以了。

width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no 大概意思是,网页宽度采用设备宽度,缩放比例为1,不允许用户缩放操作,

以上的头部声明是手机端页面的标配。

懒人建站认为响应式布局最好是先做最简单版本,然后再扩展成复杂版本,这样做的好处的在手机上访问的时候可以只载入简单版本的js和css文件,而在PC端宽屏上将会载入复杂的庞大的js和css文件。

如果你真的要做响应式布局响应到手机端的话,对于字体字号的选择推荐使用rem做为单位,

设置如下:

html{font-size: 62.5%;}

使用的时候,如果你要设置一个16px的字号,用rem字号表示就是 1.6rem,font-size:2em; == font-size:20px;

media query的使用方法

一、判断媒体类型,引用不同的样式表

<link rel=”stylesheet” media=”screen and (判断条件)” herf=”需要调用的样式表文件” />

通过设定屏幕的判断条件,调用对应的css文件。该实例多用于整页面不同风格的css调用与选取,使用该方法可能需要为一个页面制作多份个css文件。

二、判断媒体类型,执行不同的css样式属性

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

.box{width:200px;}

.title{color:red;}

}

上述实例可以出现在外部样式表与内部样式表中。直接在样式表中以@media screen属性标注媒体类型的判断事件,在括号中写出判断条件为max-width:320px;该判断的意思是屏幕宽度大于240px则执行大括号内的样式属性,如果小于320px则不执行。

关键词:

    + 相关信息

    前端案例

    返回顶部 欢迎访问web记录!每一步的成长都是一种幸福,聪明的女孩擅长记录幸福!