移动端适配(H5)

基础部分

初始化标签

npm install normalize.css

移动端视口设置

在移动端默认宽980 viewport只在移动端生效，pc端无效

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

user-scalable=no 表示不允许缩放

二倍图

移动端开发时的1px不等于1物理像素
Pc端正好

实际时就是用100px来做50px的案例

物理像素比：1px对应的物理像素点个数

rem

js方式

   <script>
        //以375为例子
        let fontSize=document.documentElement.clientWidth/3.75   
        document.documentElement.style.fontSize=fontSize+"px"
    </script>

必须将body设置回正常的

   body{
            font-size: 16px;
        }

css方式

通过媒体查询来引入不同的css

<link rel="stylesheet" href="./index.css" media="all and (min-width:750px)">

同时适配 pc和 mobile

// 1rem == 100px
// 这是以375的设计图作为基准
@media screen and (max-width: 414px) {
  html {
    font-size: 26.6667vw !important;
    color: #666;
  }
  body {
    font-size: 16px;
  }
}

@media screen and (min-width: 415px) {
  html {
    font-size: 625% !important;
    color: #666;
  }
  body {
    font-size: 16px;
  }
}

媒体查询

2.2语法规范

@media mediatype and | not |only (media feature) {
	具体的css代码
}

all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕、平板电脑、智能手机等。

其他

Bootstrap具有移动设备优先、浏览器支持良好、容易上手、响应式设计等优点，所以Bootstrap被广泛应用
什么是Bootstrap网格系统
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类
响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。