# 1、下载窗口favicon.ico / ico 图标 引入 ~~~ <link rel="shortcut icon" href-"favicon.ico" type-"image/x-icon"/> ~~~ # 2、代码补全 ~~~ 手机端代码：user-scalable=0,maximum-scale=1.0，minmum-scale=1.0 ~~~ # 3、首页初始化 ~~~ html{ //设置页面 尺寸 （750px）/份数（15） font-size: 50px; } 首页：body { margin: 0 auto; min-width: 320px; //开发时的最大尺寸 max-width: 750px; background: #fff; font-size: 1 4px; font-family:-apple-system, Helvetica, sans-serif; line-height: 1.5; color: #666; box-sizing: border-box; } ~~~ # 4、开发移动端 必备盒子模型 css3 优点**不会因为内容撑开盒子** ~~~ div{box-sizing: border-box;}; ~~~ # 5、引入文字图标 # 1. ~~~ 引入文字图标声明 @font-face { font-family: "icomoon"; /*2. 一定要注意路径的问题*/ src: url('../fonts/icomoon.eot?7kkyc2'); src: url('../fonts/icomoon.eot?7kkyc2#iefix') format( 'embedded-opentype'), url('../fonts/icomoon.ttf?7kkyc2') format('truetype'), url('../fonts/icomoon.woff?7kkyc2') format( 'woff'), url(' ../fonts/icomoon.svg?7kkyc2#icomoon') format( 'svg'); font -weight: normal; font-styLe: normal; } 使用 div::after { font-family: "icomoon"; content: "\e910"; } ~~~ 2. 阿里字体图标引入 ~~~ @font-face { font-family: 'iconfont'; src: url('../fonts/iconfont.eot'); src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('../fonts/iconfont.woff2') format('woff2'), url('../fonts/iconfont.woff') format('woff'), url('../fonts/iconfont.ttf') format('truetype'), url('../fonts/iconfont.svg#iconfont') format('svg'); } div::before { font-family: "iconfont"; //&#x 这些不要写 content: "\e747"; } ~~~ # 6、背景 ~~~ background: transparent url(image. jpg) no-repeat center top ; 背景 透明 图片地址 不平铺 方位 2倍精灵图 background: url(../upload/1.png)no-repeat -1px -79px; （缩小后的坐标） background-size: 20px auto; （精灵图 缩小1半的分辨率） ~~~ # 对齐方式  // 先两边贴边再平分剩余空间(重要)  中间的内容是居中 justify-content: space-between; // 默认y轴居中  垂直居中  行=中间 align-items: center; # 媒体查询（自动调节页面大小尺寸） ~~~ //把页面分成固定分数 @mediascreenand (min-width: 320px){ html { font-size: 320px / 15; }}; @mediascreenand (min-width: 360px){ html { font-size: 360px /15;}} @mediascreenand (min-width: 375px){ html { font-size: 375px /15; }}; @mediascreenand (min-width: 384px){ html { font-size: 384px /15; }}; @mediascreenand (min-width: 400px){ html { font-size: 400px / 15; }}; @mediascreenand (min-width: 414px){ html { font-size: 414px / 15; }}; @mediascreenand (min-width: 424px){ html { font-size: 424px / 15; }}; @mediascreenand (min-width: 480px){ html { font-size: 480px / 15; }}; @mediascreenand (min-width: 540px){ html { font-size: 540px / 15; }}; @mediascreenand (min-width: 720px){ html { font-size: 720px / 15; }}; @mediascreenand (min-width: 750px){ html { font-size: 750px / 15; }}; ~~~