判断4S,iphone5以及1080p的手机屏幕分辨率,加载不同的css怎么写?

html-css014

判断4S,iphone5以及1080p的手机屏幕分辨率,加载不同的css怎么写?,第1张

用if else来判断,给<script>设置一个ID,再根据setAttribute改变src的属性。

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */

.class{}

}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */

.class{}

}

分辨率可以从显示分辨率与图像分辨率两个方向来分类。

显示分辨率(屏幕分辨率)是屏幕图像的精密度,是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的,显示器可显示的像素越多,画面就越精细,同样的屏幕区域内能显示的信息也越多,所以分辨率是个非常重要的性能指标之一。

可以把整个图像想象成是一个大型的棋盘,而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下,显示屏越小图像越清晰,反之,显示屏大小固定时,显示分辨率越高图像越清晰。

图像分辨率则是单位英寸中所包含的像素点数,其定义更趋近于分辨率本身的定义。

css具有媒体响应功能,可以判断屏幕宽度,从而加载设置的css

如下代码,当宽度小于1000px的时候加载css下的css-mobile.css

<link href="css/css-mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 1000px)">

如下代码,当宽度大于1000px的时候加载css下的css-pc.css

<link href="css/css-pc.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)">

响应式web设计

两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件:

<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

意思是当屏幕的宽度大于等于400px的时候,应用styleA.css

<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

意思是当屏幕的宽度大于600小于800时,应用styleB.css

另一种方式,即是直接写在<style>标签里:

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/

.class {

background: #ccc

}

}

写法是前面加@media,其它跟link里的media属性相同

其实基本上就是样式覆盖~,判断设备,然后引用不同的样式文件覆盖。

要注意的是由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要,否则会出现横向滚动条。