移动端适配

视口标签

实现网页宽度等于设备宽度

移动端没有视口标签网页默认html宽度为980

<meta name='viewpoint' content='width=device-width,initial-scale=1.0'>

移动端适配的方法由以下几种：

• 弹性盒模型布局
• 百分比布局
• rem布局
• vw / vh
• 媒体查询

较为常用的适配方案：

• rem 搭配 vw
• rem 搭配 媒体查询

css媒体查询的基本使用

    @meta (width:100px){
        html{
            font-size:12px
        }
    }
    //min-height min-width max-height max-width

link标签上使用媒体查询（可控制不同宽度展示不同样式表）

<link rel='stylesheet' href='./a.css' media="(min-width:120px)">

媒体查询在电商网站一般实现内容的隐藏。

扯了好多题外话，现在为大家讲解其中最为常用的几种移动端适配技巧rem适配。

一、rem 适配

首先开启理想视口使得 布局视口 = 设备独立像素值

1. rem适配方案一

淘宝、百度使用方法。

核心过程

基本上标准设计稿（按照iphone 6 7 8）为：375*667

所以我们也同样以375*667的设计稿为例

• 设置根标签的fontsize：100px；

• 根字体 = （手机横向设备独立像素值 * 100）/设计稿宽度

• 编辑样式时： 直接以rem为单位值为： 设计值 / 100；

//获取布局视口宽度
const dpWidth = document.documentElement.clientWidth
//计算根字体大小
const rootFonstSize = (dpWidth * 100)/375
//设置根字体大小
document.documentElement.style.fontSize = rootFonstSize + 'px'

优化

采用实时适配 省去手动刷新

function adapter(){
	//获取布局视口宽度
	const dpWidth = document.documentElement.clientWidth
	//计算根字体大小
	const rootFonstSize = (dpWidth * 100)/375
	//设置根字体大小
	document.documentElement.style.fontSize = rootFonstSize + 'px'
}
adapter()
window.onresize = adapter

2. rem适配方案二

方案二 ：一般配合less使用 不用自己进行计算

搜狐、唯品会使用方法

核心过程

• 根标签的font-size：手机横向设备独立像素值 / 10

• 编写样式时：直接以rem为单位。值为：设计值 /（ 设计稿宽度/10）

function adapter(){
	//获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
	const dpWidth = document.documentElement.clientWidth
	//计算根字体大小
	const rootFonstSize = dpWidth / 10
	//设置根字体大小
	document.documentElement.style.fontSize = rootFonstSize + 'px'
}
adapter()
window.onresize = adapter

二、vw适配

• 使用设备宽度 / 100vw 求出1vw占多少px

• 元素样式：宽度 / 设备宽度 / 100vw

@basic:375 /100vw;
* {
  margin: 0;
  padding: 0;
}
#demo {
  width: 345 / @basic;
  height: 150 / @basic;
  background-color: skyblue;
  margin: 0 auto;
  margin-top: 15 / @basic;
  border: 1px solid black;
}