移动web开发入门
一，视口
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
获取视口宽度
<script> console.log(window.innerWidth); console.log(document.documentElement.clientWidth); console.log(document.documentElement.getBoundingClientRect().width); var viewWidth = document.documentElement.clientWidth || window.innerWidth; // 兼容性问题，不要用 // console.log(screen.width); // dpr console.log(window.devicePixelRatio); </script>
二，box-sizing
移动端一般选择border-box
.box1 {
/*width/height代表内容的宽高*/
box-sizing: content-box;
padding: 10px;
border: 10px solid #ccc;
}
.box2 {
/*width/height代表整个盒子的宽高*/
box-sizing: border-box;
padding: 10px;
border: 10px solid #ccc;
}
三，图标字体
阿里巴巴矢量图标库(https://www.iconfont.cn/)
<link rel="stylesheet" href="css/iconfont.css"> <i class="iconfont icon-scan"></i> <i class="iconfont icon-backtop"></i>
四，flex布局
https://www.cnblogs.com/liqianlong/p/15458985.html
五，媒体查询
为什么需要媒体查询？
一套样式不可能适应各种大小的屏幕，针对不同的屏幕大小写样式，让我们的页面在不同大小的屏幕上都能正常显示。
语法
media query
类型
all(default)
screen / print / speech
窗口大于900红
@media screen and (min-width: 900px) {
body {
background-color: red;
}
}
媒体查询中的逻辑
与( and )
或( , )
非( not )
窗口大于900并且小于1024红
@media screen and (min-width: 900px) and (max-width: 1024px) {
body {
background-color: red;
}
}
窗口大于1024或者所有（all）小于900红
@media screen and (min-width: 1024px), (max-width: 900px) {
body {
background-color: red;
}
}
窗口大于1024或者窗口小于900红
@media screen and (min-width: 1024px), screen and (max-width: 900px) {
body {
background-color: red;
}
}
not针对and是针对后面整体
@media not screen and (min-width: 900px) and (max-width: 1024px) {
body {
background-color: red;
}
}
not针对逗号是针对前面，如果后面也要not也要加上
@media not screen and (min-width: 1024px), screen and (max-width: 900px) {
body {
background-color: red;
}
}
媒体特征表达式
width/max-width/min-width
-webkit-device-pixel-ratio/-webkit-max-device-pixel-ratio/-webkit-min-pixel-ratio
orientation
landscape/portrait
不常用
height
device-width/device-height
screen.width/screen.height
aspect-ratio 视口的宽高比
@media (-webkit-max-device-pixel-ratio: 2) and (orientation: landscape) {
body {
background-color: red;
}
}
六，媒体策略
改变屏幕大小，当页面显示不正常的时候，你就需要设置断点了。
xs: < 576px
sm: 576px ~ 768px
md: 768px ~ 992px
lg: 992px ~ 1200px
xl: > 1200px
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>3.8 媒体查询--策略</title> <style> * { box-sizing: border-box; padding: 0; margin: 0; } body { padding-top: 200px; } img { width: 100%; height: 100%; } .row { width: 100%; display: flex; flex-wrap: wrap; } .col { padding-top: 10px; padding-bottom: 10px; background-color: rgba(86, 61, 124, 0.15); border: 1px solid rgba(86, 61, 124, 0.2); } .col { width: 100%; } @media (min-width: 576px) { .col { width: 50%; } } @media (min-width: 768px) { .col { width: 25%; } } @media (min-width: 992px) { .col { width: 16.6666666667%; } } @media (min-width: 1200px) { .col { width: 8.33333333%; } } </style> </head> <body> <div class="row"> <div class="col"> <img src="img/3.8-1.png" alt=""> </div> <div class="col"> <img src="img/3.8-1.png" alt=""> </div> <div class="col"> <img src="img/3.8-1.png" alt=""> </div> <div class="col"> <img src="img/3.8-1.png" alt=""> </div> <div class="col"> <img src="img/3.8-1.png" alt=""> </div> <div class="col"> <img src="img/3.8-1.png" alt=""> </div> <div class="col"> <img src="img/3.8-1.png" alt=""> </div> <div class="col"> <img src="img/3.8-1.png" alt=""> </div> <div class="col"> <img src="img/3.8-1.png" alt=""> </div> <div class="col"> <img src="img/3.8-1.png" alt=""> </div> <div class="col"> <img src="img/3.8-1.png" alt=""> </div> <div class="col"> <img src="img/3.8-1.png" alt=""> </div> </div> </body> </html>
七，移动端常用单位
px/%/em/rem/vw/vh
width: 100vw;表示宽度百分之百
height: 10vh;表示高度百分之十
px/em
height
假设长度375px，高度50px的元素要等比例，在你使用浏览器拉伸的时候我们假定获取到拉伸长度为750px。高度为Y。
那么 375/750 = 50/Y，Y=100
height = (document.documentElement.clientWidth / 375) * 50 px
用px/em做单位，每次都要用js一一修改
能不能统一修改呢？
rem 针对的是HTML下的font-size大小设定
所以可以通过更改HTML下的font-size大小来对页面元素进行等比例放大缩小
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>3.9 移动端常用单位</title> <link rel="stylesheet" href="css/iconfont.css"> <style> /*px/%/em/rem/vw/vh*/ /*css reset*/ * { box-sizing: border-box; padding: 0; margin: 0; } body { background-color: #e2e2e2; color: #595B66; } a { font-size: 12px; color: #686868; text-decoration: none; } li { list-style: none; } .tabbar-container { position: fixed; left: 0; bottom: 0; z-index: 1000; width: 100%; background-color: #fff; box-shadow: 0 0 10px 0 rgba(154, 141 ,141, 0.6); height: 2.5rem; } .tabbar-link .iconfont { font-size: 1.2rem; } .tabbar, .tabbar-item, .tabbar-link { height: 100%; } .tabbar { display: flex; } .tabbar-item { flex: 1; } .tabbar-link { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 0.6rem; } .tabbar-item-active .tabbar-link { color: #de181b; } </style> </head> <body> <!-- <p style="text-indent: 2em;"> 我是短路 </p> --> <div class="tabbar-container"> <ul class="tabbar"> <li class="tabbar-item tabbar-item-active"> <a href="###" class="tabbar-link"> <i class="iconfont icon-home"></i> <span>首页</span> </a> </li> <li class="tabbar-item"> <a href="###" class="tabbar-link"> <i class="iconfont icon-category"></i> <span>分类页</span> </a> </li> <li class="tabbar-item"> <a href="###" class="tabbar-link"> <i class="iconfont icon-cart"></i> <span>购物车</span> </a> </li> <li class="tabbar-item"> <a href="###" class="tabbar-link"> <i class="iconfont icon-personal"></i> <span>个人中心</span> </a> </li> </ul> </div> <script> setRemUnit(); window.onresize = setRemUnit; function setRemUnit() { var docEl = document.documentElement; var viewWidth = docEl.clientWidth; docEl.style.fontSize = viewWidth / 375 * 20 + 'px'; // docEl.style.fontSize = viewWidth / 750 * 40 + 'px'; // 1rem = 20px } </script> </body> </html>
