016 HTML+CSS(Class198 - )

[A] 移动端之viewpoint视口

                在移动端viewpoint视口就是浏览器显示页面内容的屏幕区域。 在viewpoint中有两种视口，分别为visual viewpoint(可视视口)和layout viewpoint(布局视口)。

                viewpoint固定大小跟屏幕大小相同，在上层；而layout viewpoint在下层。 layout viewpoint可改变大小，其默认像素为980px，可通过document.documentElement.clientWidth获取。

                现代网页需要将layout viewpoint设置成与visual viewpoint等同大小，方便网页制作。

 

            1. viewpoint设置

                　　通过<meta>标签进行设置，name属性指定viewpoint值，content属性进行视口配置。

                如：<meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=0.5">

                    值                                       　　　　含义

                    width                  设置layout viewpoint的宽度特定值，device-width表示设备宽

                    height                     设置layout viewpoint的高度特定值，一般不进行设置

                    initial-scale                       设置页面的初始缩放

                    minimum-scale                       设置页面的最小缩放

                    maximum-scale                       设置页面的最大缩放

                    user-scalable                       设置页面能否进行缩放

            

 

　　　　2. 移动端适配布局

                　　a. 百分比布局，也叫流式布局。代表网站：优酷、百度、天猫、腾讯

                　　b. 等比缩放布局，也叫rem布局。代表网站：网易、爱奇艺、淘宝、美团。

 

 

            3. 移动端布局练习

 

            4. rem布局

                　　单位：

                   　　　　 em：是一个相对单位，1em等于当前元素或父元素的font-size值。

                   　　　　 rem：是一个相对单位，1rem等于根元素的font-size值。

                    　　　　vw/vh：把屏幕分成100份，1vw等于屏幕宽的1%，1vh等于屏幕高的1%。

             5. 动态设置font-size：

                    1. 通过JS

                        获取layout viewpoint值：document.documentElement.clientWidth

                    2. 通过vw

                        把屏幕分成100份，1vw等于屏幕宽的1%，1vh等于屏幕高的1%。

                【注】要给body重置一下font-size：16px，即保证根元素的字体免得受到影响。

 

 

[B] 响应式布局

                利用媒体查询，即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。

            1. 媒体类型：

                        值                                  含义

                        all                             用于所有设备

                        print                       同于打印机和打印预览

                        screen                  用于电脑屏幕，平板电脑，智能手机等

                        speech                      应用于屏幕阅读器等发声设备

            2. 相关语法：

                　　and、not                             与、或

                　　min-width、max-width                 最小宽、最大宽

               　　 orientation：portrait/landscape      纵屏、横屏

                　　<link>

            3. 语法：

                　　@media 媒体类型 and/or (条件){

                    　　样式1;

                   　　 样式2;

                    　　......

                　　}

                说明：

                   　　 a. 媒体类型一般为all；

                  　　  b. 条件为min-width，max-width的设置

                   　　 c. 样式1，样式2为满足相应时展示的样式。

                　　【注】当样式冲突时，以后写的为准

            4. link的用法：引入外部css文件做响应式布局

                　　如：<link rel="stylesheet" href="base.css" media="all and (min-width+400px)">

            5. 常见修改样式

                　　display

                　　float

                　　width

                　　【注】响应时代码要写到适配样式的下面

            6. 响应式的两种基本操作模式

                a. 通过响应式布局在不同的屏幕条件下给同一个id或者class编写样式

                b. 通过响应式布局在不同的屏幕条件下分别编写不同的样式，通过调用不同的名字来换用不同的样式