苏宁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字體大小。
總結
以上是生活随笔為你收集整理的苏宁css代码生成器,【前端】06 - rem + less + 媒体查询 - 制作苏宁首页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我国存款总额超227万亿，是GDP的两倍
- 下一篇： oracle命令行打不开,关于oracl