苏宁css代码生成器,【前端】06 - rem + less + 媒体查询 - 制作苏宁首页

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字体大小。