全部笔记

2.页面美化（一）

2.1 响应式布局

2.1.1 响应式布局介绍

2.1.2 视口的概念

移动设备上的视口就是设备的屏幕能用来显示用户网页的那一块区域。具体地说，就是浏览器上用来显示网页的那部分区域

在页面加载时，可以使用meta标签设置浏览器的视口(viewport)的宽度

语法

<meta name="viewport“ content="width=device-width,initial-scale=1.0,maximum-scale=1.0,   user-scalable=0" />

视口的相关属性设置

属性名	说明
width	设置layout viewport的宽度为一个正整数或字符串“width-device”
initial-scale	设置页面的初始缩放值为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值为一个数字，可以带小数
height	设置layout viewport的高度为一个正整数或字符串“height-device”
user-scalable	是否允许用户进行缩放，值为“no”或“yes”。no代表不允许，yes代表允许

2.2 媒体查询

2.2.1 媒体查询介绍

媒体查询是制作响应式布局的一个利器，能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果
媒体查询可以获取的值如下

设备的宽和高

渲染窗口的宽和高

设备的手持方向

画面比例

设备比例

对象颜色或颜色列表

设备的分辨率

2.2.2 媒体查询语法结构及用法

媒体查询的基本语法
```
@media 设备名 only（选取条件）not（选取条件）and（选取条件）
{ 
          CSS样式规则
}
```
only（限定某种设备，可省略）、and（逻辑与）和 not（排除某种设备）为逻辑关键字，多种设备用逗号分隔。

可用设备名参数

属性名	说明
all	所有设备
braille	盲文
handheld	手持设备
print	文档打印或打印预览模式
projection	项目演示,比如幻灯片
screen	彩色电脑屏幕
speech	演讲
tty	固定字母间距的网格媒体,比如电传打印机
tv	电视

媒体查询部分属性

属性名	说明
width	输出设备中的页面可见区域宽度
height	输出设备中的页面可见区域高度
device-width	输出设备的屏幕可见宽度
device-height	输出设备的屏幕可见高度
aspect-ratio	定义'width'与'height'的比率
device-aspect-ratio	定义'device-width'与'device-height'的比率
color	每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0
resolution	设备的分辨率

媒体查询在网页使用中有两种方式

在样式表中内嵌 @media

@media all and (max-width: 1024px) {
    /* 适合低分辨率桌面浏览器和横屏iPad */
}
@media all and (max-width: 768px) {
    /* 适合很低分辨率桌面浏览器和竖屏iPad */
}

在 link 中使用 @media

<!--适合低分辨率桌面浏览器和横屏iPad-->
<link rel=“stylesheet” type=“text/css” media=“all and (max-width: 768px)” href=“ipad.css”/>

2.3 弹性布局

2.3.1 弹性布局简介

弹性布局（也称为“伸缩盒子”或“弹性盒布局”）在 CSS3 中得到了进一步增强，为display属性添加了新值 flex，并定义了一些新的属性

属性名	说明
display	值为flex时，创建弹性布局容器
flex-direction	伸缩流方向
flex-wrap	伸缩流换行
flex-flow	伸缩流(包括方向与换行)
justify-content	主轴对齐
align-items	侧轴对齐

align-content	堆栈伸缩行
flex	弹性模型对象的子元素如何分配空间
order	弹性模型对象的子元素出现的順序
flex-grow	扩展比率
flex-shrink	收缩比率
flex-basis	项目的长度

2.4 多列布局

2.4.1 多列布局介绍

CSS3中新出现的多列布局（multi-column）是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让 Web 开发人员轻松地让文本呈现多列显示状态

属性名	说明
column-count	指定列数
column-fill	指定内容在列与列之间的分布方式
column-gap	指定列之间的距离
column-rule	复合属性
column-rule-color	设置列之间的颜色规则

属性名	说明
column-rule-style	设置列之间的样式规则
column-rule-width	设置列之间的宽度
columns	复合属性
column-span	指定元素横向能跨多少列
column-width	指定列宽

总结

响应式网页设计提供了一种设计方法，可以使同一网站在智能手机、桌面电脑以及介于这两者之间的任意设备上完美显示
移动设备上的视口就是设备的屏幕能用来显示用户网页的那一块区域，可以使用 <meta>标签设置浏览器视口的宽度
媒体查询能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果
媒体查询在网页使用中有两种方式：在样式表中内嵌 @media、在 link 中使用 @media
弹性布局一般由弹性布局的容器和弹性布局的伸缩项目两个部分组成
弹性布局的容器（flex container）指的是采用了弹性布局的 DOM 元素，而弹性布局的伸缩项目（flex item）指的是容器中包含的子 DOM 元素

原文链接：https://blog.csdn.net/GUO__CHAO/article/details/109765112

HTML5响应式网页设计【第二章、页面美化（一）】