1. 创建目录结构
目录结构
2. 引入 normalize.css 初始化样式。
3. 编写公共的 common.less 文件 。
编写common.less 设置常见的屏幕尺寸：
/*
1. 设置常见的屏幕尺寸 修改里面的 HTML 文字大小
*/
/* 因为我们pc端也可以 打开苏宁移动端首页，我们默认HTML字体大小为50px，注意这句话写在最上面*/
html {
font-size: 50px;
}
@no: 15; /* 将屏幕宽度划分为 15 份 */
@media screen and (min-width: 320px) {
html {
font-size: 320px / @no;
}
}
@media screen and (min-width: 360px) {
html {
font-size: 360px / @no;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 375px / @no;
}
}
@media screen and (min-width: 384px) {
html {
font-size: 384px / @no;
}
}
@media screen and (min-width: 400px) {
html {
font-size: 400px / @no;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 414px / @no;
}
}
@media screen and (min-width: 424px) {
html {
font-size: 424px / @no;
}
}
@media screen and (min-width: 480px) {
html {
font-size: 480px / @no;
}
}
@media screen and (min-width: 540px) {
html {
font-size: 540px / @no;
}
}
@media screen and (min-width: 720px) {
html {
font-size: 720px / @no;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 750px / @no;
}
}
4. 创建 index.less文件 并在 index.less 导入 common.less
创建 index.less文件 并在 index.less 导入 common.less。使用 @import "" 导入。
@import "common.less";
5. 注意
页面元素大小(rem) = 页面元素(px) / html字体大小；
如 width 为 100px 的盒子 要实现不同页面等比例缩放，写法如: width = 100rem / html字体大小。
