2019.01.14移动端概念
一、移动端的写法（百分比写法）
兼容性较强：initial-scale=1（初始值1）,minimum-scale=1（用户的最小缩放值）,maximum-scale=1（用户的最大缩放值）
<meta name="viewport" content = "width=device-width,initial-scale=1,minimum-scale=1,maxmum-scale=1,user-scalable=no"/>
屏幕自适应(百分比写法)：device-width
<meta name="viewport" content = "width=device-width,initial-scale=1,user-scalable=no"/>
定宽的写法：
viewport width=设计稿宽（固定宽度），不设置缩放相关属性，移动端浏览器会自动缩放页面以适配屏幕
（initial-scale=1（初始值1）,minimum-scale=1（用户的最小缩放值）,maximum-scale=1（用户的最大缩放值））
二、长度单位（css像素与物理像素不一样）
绝对单位（无论在哪里测，表示长度固定不变）：m/cm/mm/inch（英寸）/尺
1inch=2.54cm
相对单位：px
屏幕尺寸：对角线长度（单位inch）
ppi（屏幕像素密度）：是px per inch 的缩写
屏幕分辨率，理解了分辨率就能知道px为什么是相对单位
css像素：逻辑像素，就是你在写css样式时用的像素
物理像素：设备像素，屏幕这个硬件本身能够显示出色彩的最小单位
拿retina（2k）屏做案例，它将css中1*1px大小的一个div用了四个像素来显示，这样使得屏幕显示的图片更加细腻
dpr:设备像素比（device pixel ratio）
viewport概念首先提出的是苹果公司，应用在Safari浏览器，解决的问题：在移动端页面能够正常显示pc页面
viewport：视窗/视口，浏览器能够用来显示页面的尺寸大小
大部分移动端默认的视窗宽度是980px，也有一千多的
<script type="text/javascript">
console.log(window.devicePixelRatio);
//设备比与css像素比
console.log(document.querySelector(".baba").clientWidth);
//选择器：querySelector
</script>
三、rem布局原理
1.rem与em（对比）
rem是什么？单位
rem： 1rem = 一倍html的fontsize大小
em：1em = 一倍的爸爸或者自己的fontsize大小
2.rem如何实现
0）设置meta标签。
1）基准：fontsize（一般设为40px，自己定的）
2）按基准fontsize和设计图的宽高计算出以rem为单位的宽高。比如div在设计图的宽是180px，转化成rem就是180/fontsize（40）
3）根据设计图和基准fontsize算出目标手机下应有的fontsize。比如目标手机为640，那么要改变的fontsize就是：var fontSize = viewPotWidth*40/640;
3.使用js动态改变fontsize的值
使用js动态改变fontsize的值:
<script type="text/javascript">
console.log("手机viewportwidth",document.documentElement.clientWidth);
//获取viewport宽
var viewPotWidth = document.documentElement.clientWidth;
//动态计算出html应该设置的fontsize大小
//3. 根据设计图和基本fontsize算出目标手机下应有的fontsize
//640：基准:设计图总宽
var fontSize = viewPotWidth*40/640;
console.log(fontSize);
//把计算出来的fontsize真正地赋值给html
document.documentElement.style.fontSize = fontSize + 'px';
</script>
以后用这个js版本！直接拷贝即可
<script>
/*动态改变根元素字体大小*/
function recalc() {
var clientWidth = document.documentElement.clientWidth;
if(!clientWidth) return;
document.documentElement.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
function initRecalc() {
recalc();
var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
if(!document.addEventListener) return;
window.addEventListener(resizeEvt, recalc, false);//添加监听事件
document.addEventListener('DOMContentLoaded', recalc, false);
}
initRecalc();
</script>
注意：一般情况下不要给正文的字体大小使用rem为单位，因为动态计算rem不能保证最后转化px单位时是一个整数，所以在pc端下查看时有可能会有模糊边缘
直接用px，因为相差不大
四、使用scss让布局更简便(结合js获取用户手机宽度，动态改变fontsize实现)
@charset 'utf-8';
$fontSize:40;
@function r($p){
@return $p/$fontSize*1rem;
}
//计算vm 百分比
//@function v（$p）{
// @return $p/设计图总宽*100vm;
//}
html{
font-size: $fontSize*1px;
}
body{
font-size: 16px;
}
.test{
width: r(180);
height: r(100);
background-color: skyblue;
}
五、保证宽高比的两种方法
<style type="text/css">
.test{
width: 30%;
height: 0;
padding-top: 30%;
background-color: #0A6F98;
position: relative;
overflow: hidden;
}
.test img{
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.test2{
width: 300px;
height: 300px;
background-color: #0000FF;
overflow: hidden;
position: relative;
}
.test2 img{
/*width: 100%;*/
position: absolute;
left: -9999px;
top: -9999px;
right: -9999px;
bottom: -9999px;
margin: auto;
overflow: hidden;
}
</style>
<div class="test">
<img src="../2018.12.27 HTML第一节课/img/map.jpg"/>
</div>
<div class="test2">
<img src="../2018.12.27 HTML第一节课/img/map.jpg"/>
</div>
六、vh vw单位的使用（兼容性较差，类似百分比，不能精细调像素）
vw:viewport宽度上的百分比，不是屏幕。
vh:viewport高度上的百分比，不是屏幕。
