H5项目兼容PC端和移动端的方案(持续跟新)

电玩女神 2022-10-22 07:53 427阅读 0赞

### 文章目录 ###

*  一、利用CSS媒体查询维护两套样式
 *   *  拓展-媒体查询
 *  二、移动端1像素线问题
 *  三、移动端 H5 滑动穿透
 *  四、适配深色模式

# 一、利用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的线图片

[具体参考文章https://blog.csdn.net/qq\_39903567/article/details/115004404][https_blog.csdn.net_qq_39903567_article_details_115004404]

# 三、移动端 H5 滑动穿透 #

调起一个组件后：如日期选择器、列表组件等，当我们在组件上进行滑动时，会出现底部列表也跟着滑动的问题，我们并不希望这样。

处理：  
调起组件后：设置body和文档overflow = ‘hidden’；

document.body.style.overflow = 'hidden';
    document.getElementsByTagName('html')[0].style.overflow = 'hidden';

关闭组件后，去除：

document.body.style.overflow = '';
    document.getElementsByTagName('html')[0].style.overflow = '';

我遇到一些问题，有些机型上，仍然不能阻止底部的滑动。

还得在样式上设置一下,主动接手浏览器的一些默认行为，减少兼容性问题

html,
    body, #root{
        position: relative;
        height: 100%;
        min-height: 100%;
    }

# 四、适配深色模式 #

*  声明 color-scheme
 *  通过 CSS 媒体查询维护不同模式的样式
 *  图片适配:利用picture+source标签，设置不同模式下的图片 url。
 *  JavaScript中判断当前模式&监听模式变化：`matchMedia`，`addListener()`  
    [详情文章：H5项目适配系统深色模式方案总结https://blog.csdn.net/qq\_39903567/article/details/115673247][H5_https_blog.csdn.net_qq_39903567_article_details_115673247]

持续更新…

[本文链接https://blog.csdn.net/qq\_39903567/article/details/115445183][https_blog.csdn.net_qq_39903567_article_details_115445183]

[https_blog.csdn.net_qq_39903567_article_details_115004404]: https://blog.csdn.net/qq_39903567/article/details/115004404
[H5_https_blog.csdn.net_qq_39903567_article_details_115673247]: https://blog.csdn.net/qq_39903567/article/details/115673247
[https_blog.csdn.net_qq_39903567_article_details_115445183]: https://blog.csdn.net/qq_39903567/article/details/115445183