H5项⽬兼容PC端和移动端的⽅案（持续跟新）⽂章⽬录
媒体查询：实现页⾯在不同设备下正常预览 [判断当前设备] DOM⼀致，仅通过CSS媒体查询做不同样式
例⼦：
利⽤媒体查询，对屏幕宽度⼤于800px的设备进⾏⼀些样式上的处理
@media screen and(min-width:800px) {
.......
}
拓展-媒体查询
媒体类型eoo
all (所有的设备)
print (打印设备)
screen (电脑屏幕，平板电脑，智能⼿机)
媒体特性
height ⽹页显⽰区域完全等于设置的⾼度
max-width / max-height ⽹页显⽰区域⼩于等于设置的宽度
min-width / min-width ⽹页显⽰区域⼤于等于设置的宽度
orientation: portrait (竖屏模式) | landscape (横屏模式)
语法关键字
and 可以将多个媒体特性链接到⼀块，相当于且
not 排除某个媒体特性 相当于⾮，可以省略
only 指定某个特定的媒体类型, 可以省略
- 内嵌式语法
@media only screen and (max-width: 420px) {
body {
background-color: red;
}
}
备注: 多个条件联写
@media only screen and (width: 320px) and (height: 568px) {}
要实现移动端上的⼀像素线，
window.devicePixelRatio=物理像素 /CSS像素
⽬前主流的屏幕DPR=2或者3。拿2倍屏来说，设备的物理像素要实现1像素，⽽DPR=2，
所以css 像素只能是 0.5。
⼀般设计稿是按照750来设计的，它上⾯的1px是以750来参照的，⽽我们写css样式是以设备375为参照的，所以我们应该写的0.5px
实现：
1. transform: scaleX(0.5);
2. 利⽤0.5px的线图⽚
微调电容
三、移动端 H5 滑动穿透
调起⼀个组件后：如⽇期选择器、列表组件等，当我们在组件上进⾏滑动时，会出现底部列表也跟着滑动的问题，我们并不希望这样。
抽油机模型处理：
调起组件后：设置body和⽂档overflow = ‘hidden’；
document.body.style.overflow = 'hidden';
关闭组件后，去除：
document.body.style.overflow = '';
我遇到⼀些问题，有些机型上，仍然不能阻⽌底部的滑动。
还得在样式上设置⼀下，主动接⼿浏览器的⼀些默认⾏为，减少兼容性问题
html,
body, #root{
蒸汽直埋管道
position: relative;
height: 100%;
min-height: 100%;
机床顶针
}
四、适配深⾊模式
声明 color-scheme
通过 CSS 媒体查询维护不同模式的样式
氧化挂具图⽚适配：利⽤picture+source标签，设置不同模式下的图⽚ url。
持续更新…
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议