移动端响应式布局如何实现

  1. viewport 视口设置
  2. @media 媒体查询
  3. 不要写死尺寸
    • 多用百分比确定布局尺寸
    • 多用rem/em 确定布局
    • 多用vh/vw 确定布局

目录

  1. 移动端响应式布局如何实现
  2. viewport 视口设置
  3. @media 媒体查询
  4. 图标库的使用
  5. rem 自适应布局
    1. flexiable.js

移动端响应式布局如何实现

  1. viewport 视口设置
  2. @media 媒体查询
  3. 不要写死尺寸
    • 多用百分比确定布局尺寸
    • 多用rem/em 确定布局
    • 多用vh/vw 确定布局

viewport 视口设置

视口: 视觉的窗口 是虚拟的
移动设备的浏览器的viewport 默认是980px

  • 在制作移动端设备需要在网页上设置

      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

@media 媒体查询

使用方法

  • 直接引入

    
        <style>
            * {
                margin: 0;
                padding: 0;
                background: wheat;
            }

            @media screen and (max-width: 725px) and (min-width: 325px){
                *{
                    background-color: aliceblue;
                }
            }
        </style>

  • 外接式

    <link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" href=""/>

图标库的使用

rem 自适应布局

  1. 先对比pc 和m端 的设计稿，看看有什么区别，通常使用flex 布局。宽度尽量用百分比、间距、高度、字体大小使用em.

  2. 1em 等于当前盒子的 20px (1em = 20px)

相对值大小：% em rem

%：

  • 相对于父元素自身大小进行控制
    • 缺点：高度不好控制

em：

  • 相对于当前容器的字体进行变化
  • 当前容器字体大小为20px, 1em = 20px

rem：

  • 相对于根(html) 的字体大小进行变化
  • 当前根元素的字体为20px, 1rem = 20px

绝对值大小：px

px:

  • 设置元素固定大小，通常给边框、文本字号设置固定值
flexiable.js

flexiable.js是由淘宝官方提出来的最佳的h5移动适配解决方案。官网

注: