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

html-css018

判断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{}

}

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

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

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

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

并不是加了meta标签，网站就会自适应手机屏幕了，还需要更改一些样式。

你图片上显示搜索框的宽度是568px，但是页面的宽度只有375（iPhone X的页面显示宽度），所以肯定会超出去，发生显示不全的情况

这种情况你可以使用media标签来做自适应

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

    .search{width:300px}

}

上面代码的意思是当页面宽度小于400px的时候  就让.search的宽度变成300px。你可以吧上面的代码加到你的css里面看一下效果

不是随便添加句话就可以自适应手机屏幕的，没这么简单。如果要自适应手机，是要用到rem单位的，然而rem又要搭配媒体查询来使用。

例如你的设计稿如果是宽720px的话，那你的文字就要以原始大小除以11.25，例如16px的话就要16/11.25这样来计算。我的意思是不用像素，用rem,因为px是写死的，rem是可以适应手机端的（包括盒子的宽高都是要以rem来计算）。另外，用之前要把下面这段代码放到你css文件里：

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

html, body {

font-size: 16.875px

}

}

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

html, body {

font-size: 15px

}

}

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

html, body {

font-size: 12.5px

}

}

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

html, body {

font-size: 11.25px

}

}

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

html, body {

font-size: 10px

}

}

如果宽是720，就除以它相对应的那个值，如果是宽960，就除以960相对应的那个值，这么说应该可以明白吧。

纯手打，望采纳~