移动端 、响应式布局

移动端

移动端布局设备像素比DPR

移动端页面书写的时候设计图的尺寸

如果是移动端网页开发,UI常用的设计图尺寸是以iPhone6/7/8 为标准的,这个图的宽是750高度是1334,实际在浏览器中解析的时候是375*667  也就是UI给的设计图是一个2倍图  ,所以如果UI给的是这样的一个2倍图,那么我们开发在书写的时候,需要把测量的所有数据/2

设备像素比dpr

这里看到的2倍或者是3倍,有专业术语 叫做dpr 设备像素比

  设计图看到的750这样的宽度专业术语叫做物理像素

  浏览器上看到的375这样的宽度专业术语叫做CSS像素

  设备像素比=物理像素/CSS像素  

  以iPhone6/7/8为例  物理像素的宽度是750 css像素的宽度是375 设备像素比就是750/375=2

 目前我们书写移动端是按照写死的2或者3进行相除,真正想要达到完美适配这里的2或者是3是要动态随着不同机型发生改变的,动态获取可以后面通过js获取

为什么有dpr，像素不是1：1

手机上实际浏览器解析的跟物理像素不是1:1

原因是因为想要高清显示一些图片或者是视频

dpr是2，那么手机实际显示会把原来的像素放大2倍，同样的设备大小，像素点变得更多，那就会更高清

viewport视口

为了做移动端的适配

三类视口：布局视口（设计稿的大小） 可视视口（设备的大小） 理想视口（视觉查看设计稿和设备大小是否合适）

width=device-width:宽度等于设备宽度

initial-scale=1.0：初始缩放比例

如果没有视口的设置,真实的html在iPhone6/7/8这样的设备上解析的宽度是980,那这个980有个专业术语叫做布局视口

跟我们浏览器上看到的375是不一样的,这个375也有一个专业术语叫做视觉视口

所以也就是在默认的时候用户看到的视口宽度和html解析的视口宽度是不一样的,那么作为开发人员得需要让着2个视口宽度保持一样,此时作为开发就要通过meta标签进行视口的设置,下面的代码就是开发人员想要用户看到的跟html解析的宽度保持一致,这个想法有个专业叫做理想视口 ，（也就是和浏览器放大缩小差不多的意思）

新单位

vw viewport width

相对单位,相对于视口的宽度 满屏撑满宽度就是100vw 和百分比差不多

假设当前的设备是iPhone6/7/8 视口的宽度是375px  那么100vw=375px 1vw=375/px100px

目前我这边的开发用vw书写,原因是因为如果用vmin得需要判断一下谁是最小的,目前的css阶段没有办法获取到当前的设备视口宽高也就无法判断出哪个是最小的(js后面可以获取到也可以进行比较大小),所以先用vw书写

已知当前设备如果iPhone6/7/8的话 100vw=375px

  假设ps中标注的盒子高度是90px,因为当前的设计图是一个2倍图,用px书写就是45px,现在要用vw书写,所以需要把45px换成vw,结果就是12vw

    100vw=375px  1vw=3.75px  12vw=45px  

    最开始的90px变成12vw 经历了90px/2/3.75  90px/7.5px  

vh viewport height

相对单位,相对于视口的高度  满屏撑满高度就是100vh 和百分比差不多

假设当前的设备是iPhone6/7/8 视口的高度是667  那么100vh=667px

vmin viewport min

相对单位,相对于视口的宽高中最小的那个

假设当前的设备是iPhone6/7/8  视口宽度是375  高度是667 最小就是宽度

此时100vmin=375px 也就是对于当前设备来说 100vmin和100vw的结果是一样的

B站开发用的是vmin单位书写的

vmax viewport max

相对单位,相对视口的宽高中最大的那个

假设当前的设备是iPhone6/7/8 视口宽度是375 高度是667 最大就是高度

此时的100vmax=667px 也就是对于当前设备来说 100vmax和100vh的结果是一样的

em

em是一个相对单位，相对于最近的font-size大小

rem

rem是一个相对单位，相对于根元素也就是html的字体大小 默认字体大小16px

已知设计图中标注的单位是px开发的时候想要宽高等单位用rem而rem根据html的文字大小变化，为了实现类似的效果，此时的html的font-size的单位换成了vw

所以此时需要知道px vw rem三个单位之间的换算比例

假设当前的设备是iPhonet6/7/8视口的满屏宽度就是100vw=375px 默认也知道1rem=16px

100vw=375px 1vw=3.75px 1rem=16px 1rem=16px=4.2666666667vw(16px/3.75px)

假设当前的设备是iPhone6/7/8视口的满屏宽度就是100vw=375px假设1rem=100px

100vw=375px 1vw=3.75px 1rem=100px 1rem=100px=26.6666666667vw

这就是换算过程

响应式布局

1. Viewport

响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height：和 width 相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放。

1. 网格视图

响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。

创建响应式网格视图

12 列的网格系统可以更好的控制响应式网页。

首先我们可以计算每列的百分比: 100% / 12 列 = 8.33%。

在每列中指定 class， class="col-" 用于定义每列有几个 跨度：

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。

确保边距和边框包含在元素的宽度和高度间。

添加如下代码：

• {box-sizing: border-box;}

所有的列向左浮动，间距(padding) 为 15px：

[class*="col-"] {

float: left; padding: 15px; border: 1px solid red;

}

每一行使用