H5项⽬兼容PC端和移动端的⽅案（持续跟新）⽂章⽬录
⼀、利⽤CSS媒体查询维护两套样式
媒体查询：实现页⾯在不同设备下正常预览 [判断当前设备]
DOM⼀致，仅通过CSS媒体查询做不同样式
例⼦：
利⽤媒体查询，对屏幕宽度⼤于800px的设备进⾏⼀些样式上的处理
@media screen and(min-width:800px) {
.......
}
拓展-媒体查询
媒体类型
all (所有的设备)
print (打印设备)
screen (电脑屏幕，平板电脑，智能⼿机)
媒体特性
width ⽹页显⽰区域完全等于设置的宽度
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) {}
⼆、移动端1像素线问题
要实现移动端上的⼀像素线，
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 = '';
css最新我遇到⼀些问题，有些机型上，仍然不能阻⽌底部的滑动。
还得在样式上设置⼀下，主动接⼿浏览器的⼀些默认⾏为，减少兼容性问题
html,
body, #root{
position: relative;
height: 100%;
min-height: 100%;
}
四、适配深⾊模式
声明 color-scheme
通过 CSS 媒体查询维护不同模式的样式
图⽚适配：利⽤picture+source标签，设置不同模式下的图⽚ url。
持续更新…

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。