用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{}
}
分辨率可以从显示分辨率与图像分辨率两个方向来分类。
显示分辨率(屏幕分辨率)是屏幕图像的精密度,是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的,显示器可显示的像素越多,画面就越精细,同样的屏幕区域内能显示的信息也越多,所以分辨率是个非常重要的性能指标之一。
可以把整个图像想象成是一个大型的棋盘,而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下,显示屏越小图像越清晰,反之,显示屏大小固定时,显示分辨率越高图像越清晰。
图像分辨率则是单位英寸中所包含的像素点数,其定义更趋近于分辨率本身的定义。
1.目前台式电脑与笔记本适配测试数据以下为参考数值:
台式机和笔记本电脑的分辨率:2560x1440 1920x1200 1680x1050 1600x1200 1440x900 1366x768 1280x1024 1280x800 1280x768 1152x864 1024x768 800x600
平板电脑分辨率:iPad( 768x1024 )iPad Pro(1024x1366)Nexus 10(800x1280) Nexus 7(600x960)---显示都是不完整的
智能手机分辨率:Nexus 5(360x598) Nexus 5x(412x684) iPhone 6 Plus(414x736) iPhone 6(375x667) iPhone 5(320x568) iPhone 4(320x480)------显示都是不完整的
2.突然出现滚动条禁止屏幕抖动:
body {
padding-right: calc(100vw - 100%)
}
3.更改(美化)滚动条样式:
//滚动条整体部分
::-webkit-scrollbar {
width: 6px
height: 6px
background-color: transparent
}
//滚动条轨道部分
::-webkit-scrollbar-track {
background-color: transparent
}
//滚动条滑块部分
::-webkit-scrollbar-thumb {
border-radius: 3px
background-image: linear-gradient(135deg, #09f, #3c9)
}
4.自动识别文本换行
7.页面暗黑模式:
html{
filter: invert(1) hue-rotate(180deg)
}
8.页面悼念(全灰)模式:
html{
filter: grayscale(1)
}
9.两端文本对齐 :
text-align-last:justify
10.禁用效果 :
pointer-events:none
11.aspect-ratio维持图片长宽比 :
aspect-ratio:1/1
12.clamp() 实现页面的响应式 :
clamp() 的工作原理是“夹紧”或限制一个灵活的值,使其处于最小和最大范围之间
img {
width: clamp(15vw, 800%, 100%)
}
h1 {
font-size: clamp(20px, 5vw, 35px)
}
手机上设置css为cm不准是由于手机分辨率低。根据查询相关信息,所谓的绝对单位(cm,mm,in,pt和pc)在CSS中的含义与其他地方相同,但前提是您的输出设备具有足够高的分辨率。在激光打印机上,1厘米应该恰好是1厘米。但是在低分辨率设备上,例如计算机屏幕,CSS并不需要这样。事实上,从一个设备到另一个设备以及从一个CSS实现到另一个设备的结果往往不同。