移动端布局概念及属性

                          移动端布局

移动端视口：

视口（viewport）就是浏览器显示内容里面的浏览区，视口可以分为布局视口，视觉视口理想视口

1.布局视口（layout viewport）

2.视觉视口（visual viewport）

3.理想视口（ideal viewport）

理想视口对于设备来说是最理想的视口尺寸

需要手动添加meta视口标签通知浏览器操作

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就有多宽

meta视口标签：

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

1.视口和设备宽度保持一致

2.视口默认缩放比1.0

3.不允许用户自行缩放

4.最大允许的缩放比例1.0

5.最小允许缩放比例1.0

物理像素&物理像素比

1.物理像素比值得是屏幕最小颗粒，是物理真实存在的，这是厂商在出场的时候就设置好了，比如苹果6/7/8是750*1334

2.我们开发时1px不是等于一个物理像素的

3.pc端页面，1px等于一个物理像素，但是移动端就不同

4.一个px能显示的物理像素点个数，称为物理像素比或屏幕像素比

二倍图：

多倍图

1.对于一张50px*50px的图片，在手机retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊

2.在标准viewport中，使用倍数来提高图片质量，解决在高清设备中的模糊问题

解决方法：

1.我们需要一个50*50px（css像素）的图片，直接放到iPhone8设备里，会放大两倍100*100就会模糊

2.我们采取的是在img标签里放一张100*100的图片，然后手动把这张图片在css当中设置成50*50（CSS像素）

3.我们准备的图片，比我们实际需要的大小大两倍，这种方式就是2倍图

移动端布局操作顺序：

1.链接相应的CSS、JS文件。注意所链接文件顺序。

  使用其他编码器时，注意设置

2.确定设计稿大小，改相应rem、js参数；（插件：cssrem）

  640px设计稿/rem、js（function）为640，插件（font-size）改为64，

  750px设计稿/rem、js为750，插件改为75。

3.设置页面为高度自适应；

   html，body {height：100%}

 盒子也要给{height：100%}

4.根据测量布局；

5.当整体产生滚动条时，设置position：absolute；脱离布局流

6.px、em、和rem的区别

1）概念

px：绝对单位，页面按精确像素展示。

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

rem基础：

1.类似于em，em是父元素字体大小

2.不同的是rem基准是相当于html元素的字体大小

比如根元素（html）设置font-size=12px；非根元素设置width：2rem；则换成px就表示为24px

em和rem的区别：

1.em是相对父元素的字体大小来说的

2.rem是相对于html元素字体大小来说的

3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制

2）em和rem的区别

PX特点：字体大小固定。

EM特点 ：

a. em的值并不是固定的；

b.em会继承父级元素的字体大小。

rem特点：

rem是CSS3新增的一个相对单位（root em，根em）,区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

如何计算rem

1.跟字体大小html：font-size默认设置为16px

2.假设盒子尺寸88px，然后除2等于44px（width：44px）

3.再用44除16 （最后得出width：2.75rem）

                              媒体查询

1.说明：(Media Query)是CSS3的新语法

媒体查询可以根据不同的屏幕尺寸在改变不同的样式

a.页面结构简单使用

b.使用@media查询，可以针对不同的媒体类型定义不同的样式

c.当你重置浏览器大小的过程中，页面也会根据浏览器的高度和宽度进行重新渲染页面

语法规范：

@media mediatype and/not/only (media feature){

   css-code;

}

1.用@media开头，注意符号

2.mediatype 媒体类型

说明：将不同的终端设备划分成不同的类型，称为媒体类型

值：all用于所有设备，print用于打印说明，scree用于电脑屏幕，平板电脑，智能手机等

3.关键字and not only

说明：关键字讲媒体类型或多个媒体特性连接到一起作为媒体查询条件

and：可以将多个媒体特性连接到一起

not：排除某个媒体类型，相当于非的意思，可以省略

only：指定某个特定的媒体类型，可以省略

4.media feature 媒体特性，必须有小括号包含

说明：每种媒体类型都具有各自不同的属性，根据不同的媒体类型设置不同的展示风格，我们暂且了解三个，注意他们都要加小括号

with：定义输出设备中可见页面的宽度

min-with：定义输出设备中页面最小可见区域宽度

max-with：定义输出设备中页面最大可见区域宽度

这句话的意思就是：在我们屏幕上，并且，最大宽度是800px也是小于800px，{设置我们想要的样式}

max-width想当与小于等于800px

最小宽度

注意：

1.为了防止混乱，媒体查询时我们要按照要求从小到大或者由大到小的顺序来写，一般从小到大写这样代码更简洁

2.screen and 必须带上不能省略

3.数字后面也必须跟上单位

2.媒体查询引入资源：

说明：当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheets（样式表）

就是在link中判断设备的尺寸，然后引用不同的css文件

.语法

1）@media screen and (条件：最小宽度，最大宽度等)

2）min-width 若当前页面宽度大于min-width的值时，则样式生 效。注意！链接的css文件的min-width应从小写到大;

或者最大宽度：

rem适配方案

.屏幕分界点：

超小屏幕xs （移动设备）768px以下

小屏设备sm             768px-992px

中等屏幕md             992px-1200px

宽屏设备lg             1200px以上

现基本为750为基准