可以做公众号封面图的网站,dedecms插件,房地产市场现象,山东济南城乡建设厅网站移动端适配
方案 1#xff1a;rem html font-size
方案 2#xff1a;vw rem html font-size
rem 是相对于 html 元素的 font-size 来设置的单位#xff0c;通过在不同屏幕尺寸下动态修改 html 元素的 font-size 可达到适配效果
在开发中#xff0c;我们只需要考虑两个…移动端适配
方案 1rem html font-size
方案 2vw rem html font-size
rem 是相对于 html 元素的 font-size 来设置的单位通过在不同屏幕尺寸下动态修改 html 元素的 font-size 可达到适配效果
在开发中我们只需要考虑两个问题 针对不同的屏幕尺寸设置不同的 html font-size 将元素尺寸单位转为 rem 动态设置 html font-size 方法一通过媒体查询设置 html font-size
思路通过媒体查询根据不同屏幕尺寸设置不同的 html font-size
缺点① 如果动态改变屏幕尺寸不能实时更新、 ② 只能针对某个尺寸范围设置 html font-size
media screen and (min-width: 320px) {html {font-size: 20px;}
}media screen and (min-width: 375px) {html {font-size: 24px;}
}media screen and (min-width: 414px) {html {font-size: 28px;}
}media screen and (min-width: 480px) {html {font-size: 32px;}
}.box {width: 5rem;height: 5rem;background-color: blue;
}方法二通过 JS 设置 html font-size
思路通过监听屏幕尺寸的变化动态修改 html font-size
一般会将 html font-size 设置为屏幕宽度的 1/10方便计算
function setRemUnit() {const htmlEl document.documentElement;const htmlFontSize htmlEl.clientWidth / 10;htmlEl.style.fontSize htmlFontSize px;
}
setRemUnit();
window.addEventListener(resize, setRemUnit);px 与 rem 的单位换算
假设原型图中屏幕宽度为 375px现有一宽度为 100px 的 div。我们想将 100px 转成对应的 rem 值 根元素 html 的 font-size 375px / 10 37.5px 37.5px 即为 “基准字体大小” 元素的 rem 值 100px / 37.5px 手动计算
编写 scss 函数
$baseFontSize: 37.5px; // 基准字体大小
function pxToRem($pxValue) {return $pxValue / $baseFontSize * 1rem;
}使用 scss 函数编写样式
.example {font-size: pxToRem(24px); // 将 24px 转换为对应的 rem 值margin: pxToRem(16px) pxToRem(8px); // 将 16px 和 8px 转换为对应的 rem 值
}工程化自动计算
安装 postcss-pxtorem 依赖包、配置 webpack.config.js 文件
npm install postcss-pxtorem -Dconst MiniCssExtractPlugin require(mini-css-extract-plugin);
const postcssPxToRem require(postcss-pxtorem);const stylesHandler MiniCssExtractPlugin.loader;
const postcssLoader {loader: postcss-loader,options: {postcssOptions: {plugins: [postcssPxToRem({rootValue: 37.5, // 基准字体大小, 默认 16propList: [*], // 转换的属性, 默认 [font, font-size, line-height, letter-spacing]}),],},},
};const config {// ...module: {// ...rules: [// ...{test: /\.css$/i,use: [stylesHandler, css-loader, postcssLoader],},],},
};正常编写样式px 会自动转换为 rem
.example {font-size: 24px; /* 将转换为 0.64rem */margin: 16px 8px; /* 将转换为 0.43rem 0.21rem */
}vw 单位
100vw 相当于整个视口的宽度 innerWidth1vw 相当于视口宽度的 1%将 px 转换为 vw 即可完成适配
vw 相对于 rem 的优势不需要考虑 html font-size 的问题
事实上rem 作为一种过渡的方案它利用的也是 vw 的思想 px 与 vw 的单位转换
假设原型图中屏幕宽度为 375px有一宽度为 100px 的 div。我们需要将 100px 转成对应的 vw 值
1vw 375px / 100 3.75px元素的 vw 值 100px / 3.75px 手动计算
编写 scss 函数
$baseWidth: 375px; // 设计稿宽度
function pxToVw($pxValue) {return $pxValue / $baseWidth * 100vw;
}使用 scss 函数编写样式
.example {width: pxToVw(100px); // 将 100px 转换为对应的 vw 值margin: pxToVw(16px) pxToVw(8px); // 将 16px 和 8px 转换为对应的 vw 值
}工程化自动计算
安装 postcss-px-to-viewport-8-plugin 依赖包、配置 webpack.config.js 文件
npm install postcss-px-to-viewport-8-plugin -Dconst MiniCssExtractPlugin require(mini-css-extract-plugin);
const postcssPxToViewport require(postcss-px-to-viewport-8-plugin);const stylesHandler MiniCssExtractPlugin.loader;
const postcssLoader {loader: postcss-loader,options: {postcssOptions: {plugins: [postcssPxToViewport({viewportWidth: 375, // 设计稿宽度, 默认 320}),],},},
};const config {// ...module: {// ...rules: [// ...{test: /\.css$/i,use: [stylesHandler, css-loader, postcssLoader],},],},
};正常编写样式px 会自动转换为 vw
.example {width: 100px; /* 将转换为 26.67vw */margin: 16px 8px; /* 将转换为 4.27vw 2.13vw */
}
