移动端布局一

首先先了解html中这一句话的含义：

width - viewport-的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

然后在了解一个单位rem

rem是CSS3新增的一个相对单位（root em，根em）。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。（当然移动端布局不需要考虑这些兼容的问题）

在了解一下手机屏幕分辨率以及逻辑分辨率（以iPhone为参照）

移动端物理像素和逻辑像素
设备	物理像素	逻辑像素	物理像素/逻辑像素
iPhoneX	1125*2436	375*812	3
iPhone6splus	1080 * 1920 1242 * 2208	414 * 736 扫描二维码关注公众号，回复： 4179896 查看本文章	3
iPhone6	750 * 1334	375 * 667	2
iPhone5	640*1136	320*568	2
iPhone4	640*960	320*480	2
iPhone 1G	320*480	320*480	1
iPhone 3G	320*480	320*480	1
iPhone 3GS	320*480	320*480	1

屏幕大小相同，分辨率越高，像素点越小

今天先总结移动端的两种布局方式就是写法以及实例明天将会总结第三种方法；

首先第一种：

就是在head部分加上

上代码都按照逻辑像素点1:1的去写代码

按设计图与手机尺寸比例去算出相同效果大小的px值；

第二种：

运用rem去解决自动适应屏幕的大小比例；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 自动获取屏幕宽度设置html字体大小的js -->
    <script>
        
        (function(){ var 
            doc = document.documentElement,
            resize = 'onorientationchange' in window ? 'orientationchange' : 'resize',
            resizeEvent = function () {
            // 获取设备宽度
            var WIDTH = doc.clientWidth
            // 设置宽度
            doc.style.fontSize = 100 * WIDTH / 750 + "px"
            }
        
            window.addEventListener('DOMContentLoaded', resizeEvent)
            window.addEventListener(resize, resizeEvent)})();
    </script>
    <style>
        body{
            margin: 0;
        }
        header {
            height: .88rem;
            background: red;
            font-size: .32rem;
        }
    </style>
</head>
<body>
    <!-- 以设计图为标准
    750px宽度时，将html字体大小设置为100px
    375px宽度时，将html字体大小设置为50px -->
    <header>文字文字文字文字文字文字文字文字文字文字文字文字文字</header>
</body>
</html>

猜你喜欢