方案一

normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。 一、组件安装

npm install --save normalize.css

二、组件引入

import'normalize.css/normalize.css' 地址necolas.github.io/normalize.c…

媒体查询方案二

@media screen and ( min-width: 319px){html{ font-size: 100px;}}

@media screen and ( min-width: 359px){html{ font-size: 106px;}}

@media screen and ( min-width: 383px){html{ font-size: 112px;}}

@media screen and ( min-width: 399px){html{ font-size: 118px;}}

@media screen and ( min-width: 414px){html{ font-size: 120px;}}

@media screen and ( min-width: 423px){html{ font-size: 130px;}}

@media screen and ( min-width: 479px){html{ font-size: 140px;}}

body{ font-family: Microsoft YaHei,STXihei,sans-serif; font-size: 14px}

p{margin: 0}

*{ box-sizing: border-box;-webkit-tap-highlight-color:rgba(255,0,0,0);margin: 0;padding: 0}

:focus{outline:none;}

input,a,img{border:0;}

input[type=text],input[type=checkbox],input[type=button],input[type=date]{-webkit-appearance: none;}

input,button{ outline:none;-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;}

html, body { width: 100%; min-width: 320px; max-width: 640px;margin: 0px auto; font-family: "Microsoft YaHei"; color: #333;background: #f0eff5;}

a{blr:expression(this.onFocus=this.blur())}

**=======================================**方案三============================

@charset "utf-8";

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd,input,textarea,select{

    padding: 0;

    margin: 0;

}

h1,h2,h3,h4,h5,h6{

    font-weight: normal;

}

body{

font-family: "微软雅黑", "Times New Roman", Georgia, Serif; font-size: 14px}

/* 防止字体过大 */

/* @media(min-width:750px){ html {font-size: 100px;}} */

html, body { width: 100%; min-width: 375px;

max-width: 750px;margin: 0px auto;

font-family: "Microsoft YaHei";

color: #333;background: #f0eff5;}

input,a,img{border:0;}

li{

    list-style: none;

}

a{

    text-decoration: none;

    color: inherit;

} # 方案四 一 安装插件 npm install postcss-px-to-viewport --save-dev 二 postcss.config.js module.exports = { plugins:{ autoprefixer:{}, "postcss-px-to-viewport": { viewportWidth: 750, //视窗的宽度，对应的是我们设计稿的宽度 unitPrecision: 5, //制定'px’转换为视窗单位的小数位数（很多时候无法整除） viewportUnit: 'vw', //指定需要转换成的视窗单位，建议使用vw selectorBlackList:[], //指定不需要转换的类 minPixelValue: 1, //小于或等于'1px’不转换为视窗单位 mediaQuery: false, //允许在媒体查询中转换为'px’ unitToConvert: 'px', // 需要转换的单位，默认为"px" propList: ['*', '!font-size'], // 能转化为 vw 的属性列表 fontViewportUnit: 'vw', // 字体使用的视窗单位 replace: true, // 是否直接更换属性值，而不添加备用属性 exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件 include: //src//, // 如果设置了include，那将只有匹配到的文件才会被转换 landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 landscapeUnit: 'vw', // 横屏时使用的单位 landscapeWidth: 1125, // 横屏时使用的视窗宽度 }, },

}

/* px-to-viewport-ignore-next / —> 下一行不进行转换. / px-to-viewport-ignore */ —> 当前行不进行转换