苏宁css代码生成器,【前端】06 - rem + less + 媒体查询 - 制作苏宁首页
1. 創(chuàng)建目錄結(jié)構(gòu)
目錄結(jié)構(gòu)
2. 引入 normalize.css 初始化樣式。
3. 編寫公共的 common.less 文件 。
編寫common.less 設(shè)置常見的屏幕尺寸：
/*
1. 設(shè)置常見的屏幕尺寸 修改里面的 HTML 文字大小
*/
/* 因?yàn)槲覀僷c端也可以 打開蘇寧移動(dòng)端首頁，我們默認(rèn)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. 創(chuàng)建 index.less文件 并在 index.less 導(dǎo)入 common.less
創(chuàng)建 index.less文件 并在 index.less 導(dǎo)入 common.less。使用 @import "" 導(dǎo)入。
@import "common.less";
5. 注意
頁面元素大小(rem) = 頁面元素(px) / html字體大小；
如 width 為 100px 的盒子 要實(shí)現(xiàn)不同頁面等比例縮放，寫法如: width = 100rem / html字體大小。
總結(jié)
以上是生活随笔為你收集整理的苏宁css代码生成器,【前端】06 - rem + less + 媒体查询 - 制作苏宁首页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我国存款总额超227万亿，是GDP的两倍
- 下一篇： oracle命令行打不开,关于oracl