怎么做一淘宝客网站,域名服务器作用,个人装修接活app,山东省住房城乡建设厅官网网页开发中#xff0c;我们常用的单位有如下几个#xff1a;
px#xff1a;像素固定#xff0c;无法适配各分辨率的移动设备em: 该单位受父容器影响#xff0c;大小为父元素的倍数rem: 因为html根元素大小为16px#xff0c;所以默认 1rem 16px#xff0c;rem只受根元素…
网页开发中我们常用的单位有如下几个
px像素固定无法适配各分辨率的移动设备em: 该单位受父容器影响大小为父元素的倍数rem: 因为html根元素大小为16px所以默认 1rem 16pxrem只受根元素影响也就是html的font-size
rem是最适合移动端开发的计量单位因为rem只受html大小影响所以控制html大小rem就会随着变化。
假设平面设计师给了你一个750px宽度的设计稿那么根元素html大小假设为X的计算方式为
设备宽度 / 设计稿宽度 X / 设计稿根元素大小
一般情况下我们为了方便计算会把设计稿根元素大小设置为100px这样设计稿上的 100px 1rem我们取到设计稿上元素的大小时除以100就是代码中rem的大小。
例如你测量设计稿banner宽度为750px那你就css定义宽度为7.5rem
传统方式通过js结合rem适配
const doc document.documentElementwindow.onresize () {// 获取窗口宽度let width doc.clientWidth// 设备宽度 / 设计稿宽度 根元素html大小 / 设计稿根元素大小(假设为100px)// 假设我们的设计稿宽度为 750pxif (width 750) {doc.style.fontSize 100px} else {doc.style.fontSize width / 750 * 100 px}}
上面做法非常僵硬麻烦不利于灵活定制推荐以下三种做法
一、利用lib-flexible、postcss-plugin-px2rem插件 进行移动端rem适配。
1、第一 引入lib-flexible 引入lib-flexible . 安装lib-flexible npm i lib-flexible --save-dev 在项目的入口main.js文件中引入lib-flexible: import lib-flexible 在index.html中 是否 去掉meta nameviewport 标签 要看框架具体情况具体请看第四条
2、第二 使用postcss-plugin-px2rem 使用postcss-plugin-px2rem自动将css中的px转换成rem真的是大大提升了我们的工作效率棒棒的不用自己去瞎算啊 安装postcss-plugin-px2rem npm install postcss-plugin-px2rem --save-dev 3、第三 配置postcss 在根目录下 找到.postcssrc.js文件配置如下
module.exports {plugins: {postcss-import: {},postcss-url: {},// to edit target browsers: use browserslist field in package.jsonautoprefixer: {},postcss-plugin-px2rem: {rootValue: 75, //换算基数 默认100 这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。// unitPrecision: 5, //允许REM单位增长到的十进制数字。//propWhiteList: [], //默认值是一个空数组这意味着禁用白名单并启用所有属性。// propBlackList: [], //黑名单exclude: /(node_module)/, //默认false可以reg利用正则表达式排除某些文件夹的方法例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem请把此属性设为默认值// selectorBlackList: [], //要忽略并保留为px的选择器// ignoreIdentifier: false, //boolean/string忽略单个属性的方法启用ignoreidentifier后replace将自动设置为true。// replace: true, // 布尔值替换包含REM的规则而不是添加回退。mediaQuery: false, //布尔值允许在媒体查询中转换px。minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0}}}
4、固定缩放比 最后我们需要知道flexible的转换第三方ui库 某些ui库会出现显示太小的问题具体去官网看下
网上有许多解决办法首先我们要知道根源是因为移动端ui库本来就是适配了移动端尺寸而fliexble再去适配一次能不变小吗
那么就知道解决办法了总结大致如下 1、固定缩放比即dpr为1即将index.html里面 写上视口标签 meta nameviewport contentwidthdevice-width,initial-scale1.0 如果不写 因为 lib-flexble插件会自动计算添加这个时候就无法固定dpr为1了。将.postcssrc.js 的postcss-plugin-px2rem的 remUnit值设置为rootValue: 75,exclude:/(node_module)/,这个时候 你三方ui库就不会自动转换 rem了大小就与页面保持一致了 2.不固定缩放比将 meta nameviewport标签注释掉将.postcssrc.js 的postcss-plugin-px2rem的 remUnit值设置为rootValue: 37.5,去掉exclude:/(node_module)/,这个时候 你三方ui库转换为rem后大小与页面也会保持一致了 缺点页面的基准值是以375px的尺寸来写 这样如果ui图是750px写css时 需将px/2来写所以不推荐
附上 px2rem常用 操作 1、给不希望转化rem的组件设置px的时候单位后面加上 * no *即不会转化px --- 一般border也需用这个 2、如该项px不想被转化在它转化之前就设置rem利用VScode的px to rem将写好的px直接选中optionz转为rem然后fliexble就在webpack编译的时候不去转化它了。 3、在px后面添加/*px*/,会根据dpr的不同生成三套代码。---- 一般字体需用这个 这里推荐 移动端的ui库vant-ui,与该适配方案完美结合使用
vant-ui相比其他移动端ui库优势
1. 60 高质量组件组件丰富
2. 很详细完整的中英文文档
3. 支持现代浏览器以及 Android 4.0, iOS 7
4.在gitHub上已获得11.9K的星用户量持续增多
5.源码由有赞团队 一直持续维护中。
6.相比其他移动端Ui库组件更丰富齐全功能传参方式简单易懂文档齐全容易上手。
至此结束。
二、利用lib-flexible、px2rem-loader插件 进行移动端rem适配
1、第一 引入lib-flexible . 安装lib-flexible
npm i lib-flexible --save-dev 在项目的入口main.js文件中引入lib-flexible: import lib-flexible 在index.html中去掉meta nameviewport 标签 因为 lib-flexble插件会自动计算添加meta nameviewport 视口标签
2、第二 使用px2rem-loader自动将css中的px转换成rem真的是大大提升了我们的工作效率棒棒的不用自己去瞎算啊 安装px2rem-loader npm install px2rem-loader 3、配置px2rem-loader 在build文件夹中找到 utils.js 配置如下
const px2remLoader {loader: px2rem-loader,options: {remUnit: 75 // (这里是指设计稿的宽度为 750 / 10)}}
function generateLoaders(loader, loaderOptions) {const loaders options.usePostCSS? [cssLoader, px2remLoader]: [cssLoader,px2remLoader ];if (loader) {loaders.push({loader: loader -loader,options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})});}if (options.extract) {return ExtractTextPlugin.extract({use: loaders,publicPath:../../,fallback: style-loader});} else {return [style-loader].concat(loaders);}}
总结这个方法是有缺陷的当引入第三方UI库时会发现第三方的UI库的样式也自动转化成rem了。所以样式会变小。
三、rem适配方法 适合窗口大小可能会改变 以及设计图小于750或者大于750设计稿的情况 该方法将100px为1rem根据设计稿尺寸 缩小100就为 rem
例如font-size:14px,换成rem就为0.14rem, div{width:10px;}换成rem就是div{width:0.10rem;}
/**
* 移动端自适应移动端一定要在头 head标签里面加入这段标签,以适应不同手机的视口
*/
meta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /
// !--content--
// !--widthdevice-width 可视区域的宽度值可为数字或关键词device-width--
// !--heightdevice-height 可视区域的高度值可为数字或关键词device-height--
// !--user-scalableyes/no 是否可对页面进行缩放no 禁止缩放--
// !--initial-scale1.0 页面首次被显示是可视区域的缩放级别取值1.0则页面按实际尺寸显示无任何缩放--
// !--minimum-scale1.0 可视区域的缩小级别--
// !--maximum-scale1.0 可视区域的放大级别--script
fnResize()window.onresize function () {fnResize()
}
function fnResize() {var deviceWidth document.documentElement.clientWidth || window.innerWidthif (deviceWidth 750) {deviceWidth 750}if (deviceWidth 320) {deviceWidth 320}document.documentElement.style.fontSize (deviceWidth / 7.5*2) px
}
/script
