1.@media screen

当今移动设备的发展已经越来越迅速，移动web开发的需求也越来越多多。许多大平台、大门户都纷纷推出了自己的移动web版网站。

随着移动设备飞速的发展，移动产品的屏幕规格越来越多。从几年前的320×240像素的屏幕，到现在1920×1080分辨率的屏幕。各种分辨率的屏幕让前端开发的人们叫苦连连，如何使用一种有效的方式来解决各种屏幕分辨率下的用户体验呢？

在css2中就有media type属性，用于判断媒体类型。而在css3中新增了 media query属性用于增强media type属性。因此当css3问世后，这个问题有了新的解决办法。media query属性的是media type属性的增强功能，使media type可以进行条件判断输出对应的css。

media query的使用方法

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

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

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

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

.box{width:200px;}

.title{color:red;}

}

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

转载自本文固定链接: http://www.frontopen.com/1221.html

2.图片等比缩放的自适应思路

如果网页背景是图片的话上面一种方法的适配思路是：宽度设为100%，针对不同的常用的分辨率区间设置不同的固定高度。这样高度固定下来了，页面上的其他元素就可以布局了。但这样做的缺点是，对于一些分辨率的手机，图片会被拉伸或被压缩有时甚至会比较严重。但是要对所有分辨率的手机进行分配显然比较繁杂。

而下面这种图片等比缩放的适配思路则解决了上面的问题。图片等比缩放的适配思路：缩放的图片的宽度与浏览器宽度一致，高度以及其他元素的位置都进行等比例缩放。

i.获取浏览器窗口宽和高（主要body要{margin：0；padding：0；}否则获取的会不准确）；

ii.求出背景图片的宽高比；

iii.算出等比缩放的图片的新高度=浏览器的宽度（即新图宽）/原图片的宽高比；

iiii.算出背景图片的宽和浏览器宽的比以及高的百分比；

v.其他按钮等的定位，即可采用原图大小除以iiii中对应的宽高比即可。

以上步骤均可在JavaScript进行动态的处理，如下例：

[html] view plain copy

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="source/plugin/ks_xhxw/static/script/jquery-1.7.1.min.js"></script>
<title>example首页</title>
<style>
body {
margin: 0;
padding: 0;
overflow: scroll;
background-color: #fd3b36;
}
#mainpage {
background-image: url(example/image/home.png);
background-repeat: no-repeat;
color:#fef6d8;
}
img {
-webkit-tap-highlight-color:rgba(255,255,255,0);
}
#img:hover {
background-image: url(example/image/home_button_click.png);
background-repeat: no-repeat;
}
</style>
<title>首页</title>
<body>
<div id="mainpage">
<div id="content">祝福新年</div>
<div id="btn">
<img id="img" border="0" src="example/image/home_button.png"/>
</div>
</div>
<script>
var sw = $(window).width();
var sh = $(window).height();
var pw = 640;
var ph = 1006;
var percent = pw/ph;
var percentw = pw/sw;
var newh = sw/percent; // 新高度 background-size: 100% newh;
var percenth = ph/newh;
$('#mainpage')
.css('width', sw + 'px')
.css('height', newh + 'px')
.css('background-size', '100% ' + newh + 'px');
var contenttop = 440/percenth;
var contentleft = 48/percentw;
var contentfont = 26/percenth;
contentfont = Math.floor(contentfont);
var contentlineh = 38/percenth;
$('#content')
.css('padding-top', contenttop + 'px')
.css('padding-left',contentleft+'px')
.css('padding-right',contentleft+'px')
.css('line-height',contentlineh+'px')
.css('vertical-align','top')
.css('font-size',contentfont+'px');
var btntop = 64/percenth;
var btnleft = 140/percentw;
var btnpw = 366/percentw;
var btnph = 96/percenth;
$('#btn')
.css('padding-top', btntop + 'px')
.css('padding-left',btnleft+'px');
$('#img')
.css('width', btnpw+'px ')
.css('height',btnph + 'px');
$('#img').hover(function() {
$('#img').css('background-size', btnpw + 'px ' + btnph + 'px');
});
</script>
</body>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。