h5分享页适配手机电脑

实现思路

通过@media媒体查询结合rem继承html文字大小来实现。

快捷插件配置

这里使用了VSCode的px to rem插件。

1. 先在插件市场搜索cssrem下载插件；
   
2. 配置插件
   

页面编写流程及适配详情

1. 配置meta
   h5常用配置信息:

   <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
   

   2. 公共样式编写

   * {border: 0;-webkit-tap-highlight-color: transparent;outline: 0;margin: 0;padding: 0}*,:after,:before {box-sizing: border-box;}html {/* text-size-adjust 去除根据设备尺寸而自动调整文字大小，将字体大小严格设置为我们定义的大小 *//* text-size-adjust: 100%; 等价于 text-size-adjust: none; *//* 解决在移动设备上如手机和平板横屏会导致字体变大的问题 */text-size-adjust: 100%;/* 默认字体大小 */font-size: 6.06667vw;}body,html {width: 100%;height: 100%;}body {/* 限定浏览器打开的样式，一般来说都是固定页面局域，h5内容居中 */margin: auto;/* 适配手机 *//* 页面宽度小于768px, 超小屏幕(手机) *//* 1.超小屏幕（手机） 768px以下2.小屏设备（平板） 768px-992px3.中等屏幕（旧式电脑） 992px-1200px4.大屏设备（现代电脑） 1200px以上*/max-width: 768px;font-size: .12rem;line-height: 1.5;
   }
   

2. 通过媒体查询改变页面内容的大小

    /* 根据实际情况来动态修改html的文字大小，实现页面动态缩放 */
   @media only screen and (min-width: 1200px) {html {font-size: 60px !important;}
   }