移动端--笔记

一、移动端

1.什么是移动端？

可以移动得设备被称之为移动端，手机，平板，手表，都可以称之为移动端设备。

2.移动端项目效果如何测试查看？

在浏览器中，按Fn+F12或者右键页面点击检查，打开控制台后激活左上角蓝色小手机。

3.设备模拟器中包含的功能

   (1)切换不同手机型号

   (2)最佳观看比例

   (3)该手机型号的逻辑像素

    (4)右上角三个点可以调出标尺、dpr、设备类型及进行屏幕截图。

4.物理像素（设备像素）

物理像素就是手机屏幕上的像素点，这些像素点在手机出厂时就已经固定了，他是真实存在的像素。

5.逻辑像素（css像素）

在开发页面我们所书写和参考的像素，他是在web编程时的一个虚拟概念像素。

6.设备像素比(dpr)

物理像素和逻辑像素之间的比值。

7.视网膜高清显示屏

在最开始时，是没有物理像素和逻辑像素之分的，但是随着技术的发展，手机屏幕分辨率越来越高。从iphone4开始，提出了一个高清视网膜显示屏的概念，在相同的屏幕大小内，物理像素点多了一倍，这个时候，开始用多个物理像素点来解析一个css像素。

8.为什么学习物理像素、逻辑像素、设备像素比？

目的是为了在拿到图纸后，根据量出的大小，换算我们要去书写的逻辑像素进行开发。

9.布局视口

布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。一般ios和安卓都会把布局视口定义980px;他是为了解决早期pc端在浏览器上的显示问题而产生的。所以一般pc端页面在移动端上也能显示出来，只是元素显得有点小，而且可以通过手指进行缩放。

10.视觉视口

视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。即用户在移动端看页面时，通过手机窗口看到的区域大小。

11.理想视口

理想视口是指对设备来讲最理想的视口尺寸。需要通过手动添加meta标签来实现，让布局视口和视觉视口大小保持一致。简单的说就是设备多宽我页面多宽。

12.如何设置理想视口

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

13.移动端布局流程

<1>确认设计图出自哪个设备————确认设备像素比dpr

<2>通过设备像素比和量出来的尺寸————确认逻辑像素（css像素）

<3>引入理想视口（meta标签）

<4>引入相关文件和资源，重置默认样式，开始书写样式。

二、移动端布局的几种方式

1.px固定布局 （不推荐）     不能实现多种设备的适配

   以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；

   通过量取出来的尺寸，经过换算，直接书写页面。

2.响应式布局  (不怎么使用，原因请看优劣势)

优势:

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

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

劣势:

(1)其实他是一个折中方案，为了照顾另一端的展示效果，而在pc端和移动端上都无法达到最佳展示效果。

(2)代码累赘臃肿，出现隐藏无用的元素(pc端上藏移动端需要的元素，移动端藏pc端需要的元素)，加载时间加长

(3)兼容各种设备工作量大,其实他还是需要根据不同的设备宽度来写几套不同的css,任务量其实总体没有减少,效率低下

(4)html结构总体不变，但是需要写pc端和移动端效果，限制较大，增加开发难度和设计难度。

3.弹性布局

4.等比缩放布局

5.混合布局（弹性布局+等比缩放布局）

三、如何实现响应式布局——————媒体查询

1.概念:媒体查询可以让我们根据设备显示器的特性为其设定CSS样式。媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

2.媒体查询操作方式

书写表达式和查询设备条件，如果都满足则执行为其设置的css,如果不满足则忽略这些css。

3.基础结构

   @media all and (min-width:320px) {

       body { background-color:blue;}

        }

4.支持设备类型（详细请看课件）

     开发中主要使用以下几种

          all         所有类型

          handled     移动端

          screen      前端所有的设备类型（pc、移动、显示屏、笔记本等）

5.关键字    and   not   only

6.几种关键的设备类型媒体查询

<1>手机等小屏幕手持设备    

@media screen and (min-width: 320px) and (max-width: 480px) {}

<2> 平板之类的宽度1024以下设备  

@media only screen and (min-width: 321px) and (max-width: 1024px) {}

<3>PC客户端或大屏幕设备:1028px至更大

 @media only screen and (min-width: 1029px) {}

<4> 竖屏  

@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}

<5>横屏  

@media screen and (orientation:landscape){对应样式}

注意：默认样式写在最上边

一、移动端几种常用布局方式

1.弹性布局

页面多出现百分比和flex布局。可以一定范围内适配所有尺寸的设备屏幕及浏览器宽度。

特点：

 (1)页面多出现百分比和flex

 (2)关键的模块高度固定，宽度伸缩

 (3)两侧重要模块写固定大小，中间空白区域伸缩有弹性,中间这块尽量写flex:1和百分比。

 (4)图片宽度写百分比大小，高度不写。让他根据宽度大小自适应。放图片的父元素盒子也不要写固定的高度。

 (5)文字流式。不要写宽高。

2.等比缩放布局         弊端：字体大小如果不去单独设置的话，会显得很难看。

 (1)媒体查询+rem实现等比缩放布局

可以实现等比缩放。但是需要达到触发条件，并不是实时的等比缩放。一般不考虑

 (2)rem+vw实现等比缩放布局

 思考：

<1>移动端我们是该关注宽度大小变化还是高度变化？

     ——宽度，高度变了就变了呗，纵向我们让中间内容区域滚动就好了。

<2>rem为相对根元素字体大小，1vw为窗口宽度的百分之1,如果我们将vw作为根元素字体大小会发生什么？

——等比缩放布局。假设你的屏幕大小为380px,这个时候1vw=3.8px;现在改变你的

屏幕大小，你的屏幕宽度为320px,那么这个时候1vw=3.2px;这个时候如果我们将

根元素html的字体大小的单位设置为vw,那么我们如果页面布局中全部使用rem作为

单位，当页面宽度发生变化时，根元素字体大小也会相应的变化，我们就能够实现等比缩放。

 <3>关于如何计算根元素字体大小设置为多少vw

              假设设计图宽640px

              那么逻辑像素为320px

              我们想要1rem=100px;

              又因为逻辑像素总体宽度为320px   所以  1vw=3.2px;

              求   1rem=?vw;  

              1rem=100px   3.2px=1vw;那么我们算出来100px=?vw，就能求出1rem=?vw;   1rem=100px=?vw;

              所以  1rem=31.25vw;

            *<4>求根元素字体大小万能公式     (设置后，设计图量多少写多少)

              html{

                font-size:(10000/设计图大小)vw;

              }  

              求解过程：

              假设设计图为828px

              我们想要828px的设计图在任何屏幕宽度内都是满屏效果

              那么我们得知  828px=100vw;

              又因为我们想要  1rem=100px;

              求1rem=?vw;

              828px=100vw;  等号两边同时除8.28    100px=100/8.28vw

              那么  1rem=100px=100/8.28vw;

              那么   1rem=100/8.28vw;     分子分母同乘100     1rem=10000/828vw;

    3.混合布局（等比缩放和弹性布局混着用）

      其实就是rem+vw+等比缩放布局。

等比缩放布局中，个别部分区域，我们需要给他写上一个固定的大小。之前我们都是用px,

现在我们可以在设置根元素字体大小xxxvw后，使用单位rem。每个模块的字体大小也用rem作为单位。

这个时候，如果页面在缩小，会显得更有弹性，并且字体也会随着页面的缩小而缩小。

  二、页面开发单位

    1.px      逻辑像素(css像素)大小

    2.em      相对父元素字体大小

    3.rem     相对根元素字体大小     根元素——html

    4.vw      vw为视窗宽度      1vw为视窗宽度的百分之1

    5.vh      vh为视窗高度      1vh为视窗高度的百分之1

    6.100vw、100vh和100%之间的区别？

   答:100vw和100vh是占据页面窗口的全部，他们的参照物是视窗，也就是页面窗口。100%是占据父元素大小的全部，如果父元素只有400，他就占400，参照物是父元素，所有，100%和100vw、100vh有本质区别。

一、网格布局     grid

1.含义:它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局

2.grid布局和flex布局之间的区别？

(1)相同点:都可以指定父元素内部内部多个子元素的位置。

(2)不同点：

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。

Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

3.grid内部各项的概念(容器、项目、行、列、单元格、网格线)

(1)容器：一个案例中最大的盒子，可以理解成父元素。即写了display:grid的元素。

(2)项目:一个案例中的，最大盒子里面的内容，可以理解成子元素.即写了display:grid元素的子元素。

(3)行和列：容器里面的水平区域称为"行"，垂直区域称为"列"。

(4)单元格：行和列的交叉区域，称为"单元格"。

(5)网格线：划分单元格的线叫做网格线。水平的网格线划分行，垂直的网格线划分列。

(6)网格线的规律:

<1>1行2列       两横三竖

<2>2行1列       三横两竖

<3>2行2列       三横三竖

<4>n行n列      n+1横n+1竖 

4.grid布局的属性

 (1)属性分类：网格布局可以分为两类，一类为容器属性，一类为项目属性

 (2)容器属性(写给父元素的属性)

1.触发网格布局     display:grid;

              grid            触发网格布局

              inline-grid     触发网格布局，容器变为行内块元素

          2.行列划分

            ——(1)grid-template-rows             划分行        

            ——(2)grid-template-columns           划分列

            ——(3)案例:  3行3列

                    grid-template-rows:100px 100px 100px;

                    grid-template-columns:100px 100px 100px;

            ——(4)特性：可以定义多个属性值，有几个属性值划分几行或几列，每个参数为行或列的大小。

              分不下会溢出，分不完会有剩余空间。每个子元素都会按顺序出现在网格内。子元素

              不写大小，会默认占据此单元格的全部空间。

            ——(5)属性值:

              ——《1》像素取值     100px 100px 100px;

              ——《2》百分比取值   33.3% 33.3% 33.3%;

              ——《3》关键词auto   20% auto 30%;     (auto会去自动分配剩余空间)

              ——《4》功能函数     repeat(5,20%);    repeat()内第一个值为平铺次数，第二组参数为每次平铺需要平铺的值。

              ——《5》关键词       auto-fill     (需要搭配repeat()使用，一般当做repeat的第一个值，根据第二个值来决定平铺几次)

              ——《6》关键词fr     1fr 2fr 3fr   将大小划分多份，每个参数为每份所占份额。

              ——《7》功能函数minmax()      规定行或列的最大最小值

              ——《8》划分网格线   案例如下：      (一般此属性搭配项目属性grid-row和grid-column一起使用)

                            grid-template-rows:[x1] 100px [x2] 100px [x3] 100px [x4] ;

                            grid-template-columns:[y1] 100px [y2] 100px [y3] 100px [y4];  

                         

          3.指定区域    grid-template-areas  (一般搭配grid-area使用)

            案例: grid-template-areas:

                                "a a b"

                                "c c b"

                                "c c d";

            注意事项:划分区域时，只能是长方形和正方形，不能斜着来组成三角形或者梯形。可以用"."作为占位符使用，

            使用"."的区域，不再使用。而且"."可以斜着用。

          4.项目的排列方向   grid-auto-flow

                          row       子项优先沿着行排列(默认值)

                          column     子项优先沿着列排列

          5.项目单元格对齐方式  

              justify-items

                  start    横向开始地方对齐

                  end      横向结束地方对齐

                  center   居中

                  stretch  拉伸铺满(默认值，但是子项如果写宽，此特性不显示)

              align-items

                  start    纵向开始地方对齐

                  end      纵向结束地方对齐

                  center   居中

                  stretch  拉伸铺满(默认值，但是子项如果写高，此特性不显示)

              *place-items:垂直 水平;      项目单元格对齐方式复写形式

          6.项目单元格整体对齐方式

              justify-content    整体水平对齐方式

              align-content       整体垂直对齐方式

              *place-content:垂直 水平;      项目单元格整体对齐方式复写形式

                  start                开始地方对齐

                  end                  结束地方对齐

                  center               居中对齐

                  space-around         环绕式分布

                  space-between        两端分布

          7.行列间距    (此属性不要和palce-content一起使用)

              grid-row-gap          网格行与行之间的间距

              grid-column-gap       网格列与列之间的间距

              *grid-gap:行间距 列间距;      复写形式，网格行列之间的间距

      (4).项目属性 

        (1)grid-row:x1/x2      (复写属性)  斜杠之前为开始地方的网格线名称，斜杠后为结束地方网格线名称。

            等价于一下两个属性

            grid-row-start      开始地方的网格线名称

            grid-row-end        结束地方网格线名称

        (2)grid-column:y1/y2   (复写属性)  斜杠之前为开始地方的网格线名称，斜杠后为结束地方网格线名称。

            grid-column-start      开始地方的网格线名称

            grid-column-end        结束地方网格线名称

        (3)grid-area         项目所占的区域

            案例:grid-area:a;