自适应方案 及 尺寸
2019-10-06 本文已影响0人
糕糕AA
-
px：像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
-
em：相对于父元素的font-size，默认是为浏览器字体尺寸16px
-
rem：相对大小，但相对的只是HTML根元素的font-size。
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body {font-size: 1.4rem;/*1.4 × 10px = 14px */} h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
<html data-dpr:"2" class="iphone6" style="font-size:xxxpx"></html>
当页面domready后设置document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
-
%：百分比的参照物是父元素，
-
vw：1vw等于视口宽度的1%。
-
vmin：选取vw和vh中最小的那个
@media媒体查询
PC和移动端都能按照不同的设计稿显示出来，那么需要做的就是去设置媒体查询。
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
} /*使用例子*/
