移动web开发 - 布局 P390-415、440...

移动端 三种布局

移动端基础

国内的手机浏览器都是根据webkit修改的内核，可以对webkit内核进行兼容。

 

视口（viewport）

（1）是浏览器显示页面内容的屏幕区域，分为布局视口、视觉视口和理想视口。

布局视口（layout viewport）：移动端浏览器默认设置了布局视口，分辨率为980px；会将980px的PC页面压缩成手机屏幕大小。

·视觉视口（visual viewport）：用户看到的网站的区域；所以屏幕上只看到页面的一部分区域。

理想视口（ideal viewport）：网站页面与屏幕阅读宽度相匹配，即布局视口与屏幕宽度一致；需要添加meta视口标签。

 

（2）meta视口标签

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

属性	描述
width	viewport宽度，可根据设置设备屏幕宽度设置
initial-scale	初始缩放比，一般设为1
maximum-scale	最大缩放比，一般设为1
minimum-scale	最小缩放比，一般设为1
user-scalable	用户是否可以缩放，yes或no（1或0）

 

 

二倍图

（1）物理像素（分辨率）：屏幕显示的最小颗粒；

         物理像素比（屏幕像素比）：1px能显示的物理像素点的个数；

         PC端页面上，1px等于一个物理像素，但在移动端不是，有一些的像素比为2。

 

（2）所以当一张固定px的图片放到手机上时，会根据物理像素比来放大，造成图片模糊；

         解决方法——二倍图：

1. 准备一张图片，它的px是原先固定px的两倍；
2. 放进html中，设置它的宽高度为原先的固定px；
3. 这样在显示的时候，还会放大为宽高度的两倍，但是因为准备的图片就是两倍的px，所以就不会模糊了。

 

（3）背景缩放

         设置背景图像的尺寸：

                                   background-size: 像素值 / 百分比（宽、高） / cover / contain;

属性值	描述
cover	等比例拉伸背景图，直到完全覆盖盒子，就有可能图片显示不全
contain	等比例拉伸背景图，直到宽度或者高度铺满盒子就停止，就可能盒子覆盖不完全

 

         给盒子加背景图片：

1. 准备一张宽高度是盒子两倍的图片，设置为盒子的背景；
2. 用background-size将背景图片的大小设置为盒子的大小（图片大小的一半）。

 

 

移动端开发选择

• 单独制作移动端页面（主流）
• 响应式页面兼容PC和移动端

 

技术解决方案

（1）移动端CSS初始化 —— normalize.css；

 

（2）特殊样式

         去除点击链接时默认的高亮效果：           -webkit-tap-highlight-color: transport;

         去除按钮和输入框默认的外观样式：       -webkit-appearance: none;

         禁止长按页面时弹出菜单：                     -webkit-touch-callout: none;

 

 

移动端常见布局

技术选型

单独移动端页面：

• 流式布局（百分比布局）
• flex弹性布局
• less+rem+媒体查询布局
• 混合布局

 

响应式页面：

• 媒体查询
• bootstarp

 

（1）流式布局

通过设置盒子的宽度为百分比，就不受固定宽度的限制，根据屏幕宽度来拉伸；

可以设置max-width、min-width 限制盒子的最大、最小宽度。

 

（2）flex布局

布局简单，适合移动端，不适合PC端。

 

• 原理：

flex 弹性布局可以设置给任意一个盒子，当父盒子设为flex布局后，子元素的float、clear和vertical-align属性均失效；

采用flex布局的元素称为 flex容器，它所有的子元素自动成为容器成员，成为 flex项目；

所以，就是通过给父盒子添加 display: flex; 属性，来控制子盒子的位置和排列方式。

 

• 父项属性：

（1）flex-direction

设置主轴方向，即元素排列的方向。

属性值	描述
row	默认，以x轴为主轴，从左向右排列
row-reverse	以x轴为主轴，从右向左排列
column	以y轴为主轴，从上向下排列
column-reverse	以y轴为主轴，从下向上排列

 

（2）flex-wrap

设置子元素是否换行；

若不换行，并且子元素超过了父元素的范围，就会缩小子元素的宽度，使所有子元素都挤进父元素中。

属性值	描述
nowrap	默认，不换行
wrap	子元素超出时自动换行

 

（3）flex-flow

设置主轴方向和子元素是否换行，flex-direction 和 flex-wrap 的综合简写，如：

                                                                          flex-flow: row  wrap;

 

（4）justify-content

设置元素在主轴上子元素的对齐方式。

属性值	描述
flex-start	默认，从头部开始排列
flex-end	从尾部开始排列
center	在主轴上居中对齐
space-around	平分剩余空间（左右外边距都相同）
space-between	两边元素先靠边，中间元素再平分剩余空间

 

（5）align-items

设置侧轴上子元素的排列方式；且适合在主轴上是单行（单列）的情况。

若设置x轴为主轴，则y轴为侧轴；若设置y轴为主轴，则x轴为侧轴。

属性值	描述
flex-start	从侧轴头部开始排列
flex-end	从侧轴尾部开始排列
center	在侧轴上居中对齐
stretch	默认，沿侧轴将子元素拉伸到与父盒子一样（子元素不设高\宽度）

 

（6）align-content

设置侧轴上子元素的排列方式；且只适用于子元素有换行（多行）的情况。

属性值	描述
flex-start	默认，从侧轴头部开始排列
flex-end	从侧轴尾部开始排列
center	在侧轴上居中对齐
space-around	平分剩余空间（上下或左右外边距相同）
space-between	两边元素先靠边，中间元素再平分剩余空间

 

 

• 子项属性：

（1）flex: 数字;

设置子元素所占剩余空间的份数。

 

（2）align-self

设置某一子元素在侧轴上的排列方式；

默认为auto，继承父元素的align-itmes属性；

它的属性值与align-itmes的属性值类似。

 

（3）order: 数字;

设置子元素的排列顺序；

数值越小越靠前，默认为0。

 

 

（3）rem适配布局

• rem单位

是一个相对单位，相对于html字体大小的倍数；

类似于em（相对于父元素中的字体大小）；

优点是可以通过html的字体大小，整体控制页面元素的大小，在浏览器窗口缩放时自适应调整元素大小。

 

• 媒体查询（Media Query）

CSS3的新语法，针对不同的屏幕尺寸设置不同的样式；

调整浏览器窗口大小时，也会根据媒体查询的设置来改变样式；

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

                                                      选择器 { css样式; }         }  

其中：

媒体类型 mediatype 

值	说明
all	可用于所有设备
printer	用于打印机和打印预览
screen	用于电脑、手机等屏幕

 

关键字——将媒体类型和媒体特性连接起来作为媒体查询的条件

值	说明
and	将多个媒体特性连接在一起，相当于“且”
not	排除某个媒体类型，相当于“非”
only	只用于指定的媒体类型，可省略

 

媒体特性——根据不同的媒体特性（屏幕尺寸）设置不同的样式

值	说明
width: ..px;	定义设备在某个宽度的样式
min-width: ..px;	定义在某个最大宽度下（即小于等于某个宽度时）的样式
max-width: ..px;	定义在某个最小宽度以上（即大于等于某个宽度时）的样式

 

所以 媒体查询+rem单位 就可以根据不同的屏幕宽度，实现页面元素大小的动态变化。

 

引入资源：

可以在link中判断设备的尺寸，在不同的尺寸下引用不同的css文件

              <link  rel = "stylesheet"  href = "css文件地址"  media = "mediatype  and  (width:...)">

 

 

• Less基础

Less（Leaner Style Sheets）是一种CSS扩展语音，也称为CSS预处理器；（常见的CSS预处理器还有Sass、Stylus）

在CSS语言基础上，引入变量、混入(Mixin)、运算以及函数等功能。

 

less变量：

                                    @变量名: 属性值; 

变量名命名不能以数字开头，对于大小写是严格区分的；

表示用这个变量名来代表一个属性值；

在CSS中引用变量（作为属性值）就用：@变量名

 

less编译：

要将less文件编译生成css文件，html页面才能使用；

（vscode的 Eesy Less 插件）

 

less嵌套：

子元素的样式可以直接写在父元素的样式里面；

如果是父元素的伪类、伪元素（如 :hover、::before）和交集选择器的样式，写在父元素里面时，要加一个 & 符号（如 &:hover）。

 

less运算：

颜色、数字和变量都可以参加运算，加 + 、 减 - 、 乘 * 、除 \

运算符左右都必须有空格；

两个数运算时，若只有其中一个数有单位，结果则以这个单位为准；若两个数都有单位，则结果以第一个数的单位为准；

仍遵循先乘除后加减的运算顺序，如果要改变就用小括号()。

 

 

• rem适配方案

即使用媒体查询按照不同设备设置html的字体大小，然后页面元素都用rem单位，从而实现当设备尺寸发生变化时，元素尺寸能够等比例缩放来适配当前的设备。

主流方案： less+媒体查询+rem   和    flexible.js + rem

 

 

响应式布局

原理：通过媒体查询针对不同宽度的设备进行布局，从而适配不同的设备。（rem是通过媒体查询实现等比例缩放，而响应式是在不同宽度下改变布局样式）

1. 将屏幕尺寸划分为几个常用的档位，每个档位设置一个对应的布局宽度；
2. 在整个页面下设置一个布局容器container；
3. 当用媒体查询得到屏幕尺寸后，就将布局容器的宽度设置为该档位相应的布局宽度。

 

Bootstrap前端开发框架

框架 —— 一套完整的网页功能解决方案，有预制样式库、组件和插件，控制权在框架本身；所以使用者要按框架所规定的的规范进行开发。

 

框架内已定义：

container类——不同范围的屏幕宽度对应不同的容器宽度；

container-fluid类——流式布局百分之百宽度，适合做单独移动端页面。

 

Bootstrap栅格系统

将页面布局（container）划分为等宽的列，最多12列，然后通过列数的设置来模块化页面布局。

使用： 

在html页面的container容器中，以 row 为类名创建一个盒子，表示一行；

再添加子元素作为列，类名如 class = "col-lg-4"，表示元素在大屏幕时宽度占12列中的4列；

若一行中的所有列相加不满12份，就会在右边有剩余的空白；

若一行中的所有列相加大于12份，多余的列就会自动换行；

（其中划分的四个范围——xs 超小、sm 小、md 中等、lg 大）

 

列嵌套：

再继续往盒子里嵌套子盒子时，最好先添加行 .row盒子 来消除父盒子默认的内边距，并且高度会自动与父盒子一样高；

然后在添加作为列的子盒子，其类名中 col-lg- 设置的数字，是指将父盒子划分12列后，它所占的列数；

 

列偏移：

col-lg-offset-4 添加到元素作为类名后，就可以让该元素水平向右（x轴正方向）偏移相应的份数，相当于加了左侧的外边距；

 

列排序：

col-lg-push- 、col-lg-pull-  可以改变列的顺序；

也是通过移动相应的份数，push是将左边的盒子向右推，pull是将右边的盒子向左拉；

 

响应式工具：

hidden-lg  在大屏幕下将列隐藏；

visible-    在某种屏幕下显示出来。

 

 

10.27