响应式布局基础
前端设计 2023-09-28 3223次
一：布局方式有如下几种：
1.固定布局：固定布局以PX(像素)作为单位的，在PC端，设计稿多少PX就写多少PX，前几年都是这种布局，常见的是以960px或者1000px来设计的，但是这样设计有如下缺点：
1.1.页面很死板，在更大的屏幕上，页面左右2边留白。
1.2.不适应响应性布局。
2.流式布局：流式布局是以百分比作为单位的，我们要牢记如下公式：
百分比宽度 = 目标元素宽度 / 上下文元素宽度
这种布局优点：可以自适应布局，根据不同的分辨率显示不同的宽度。
缺点：在行高或者marginTop在大屏幕下看起来太高，在小屏幕下看起来太窄。
3.弹性布局：弹性布局是以em作为单位的，同样弹性布局也支持如下公式：
百分比尺寸 = 目标元素尺寸 / 上下文元素尺寸
使用em将文字像素px转换为相对单位，现在浏览器默认文字的大小是16px，如果一个文字大小是48px，上下文元素是(浏览器)，那么转换成em 就是 48/16 = 3em. 但是如果一个h1标签的font-size是48px, h1标签内部span标签font-size 是24px,那么h1标签的font-size = 48 / 16 = 3em h1 span {font-size = 24/16 =1.5em}.弹性布局也支持响应性web设计。
二： 媒体查询：
根据特定的环境查询各种属性值，比如设备的宽度，是否横向使用不同的css样式来渲染。
媒体查询使用如下：比如内联样式可以如下写：
1. 最大宽度960px一种布局：
@media screen and (max-width:960px) {<=960}
2. 最小宽度600px 另一种布局：
@media screen and (min-width:600px) {>=600}
3. 宽度在600px 到 960px之间，如下:
@media screen (min-width:600px) and (max-width:960px) {600<=x<=900}
4.外联样式使用link标签来引用样式：
<link rel=”stylesheet” href=”xx1.css” media=”screen and (max-width:960px)”/>
<link rel=”stylesheet” href=”xx2.css” media=”screen and (min-width:600px)”/>
<link rel=”stylesheet” href=”xx3.css” media=”screen and (min-width:600px) and (max-width):960px”/>
如果对于像ipad来说，我们可以在上面增加一个属性 orientation(landscape或portrait) 横屏或者竖屏。
理解meta各个属性的含义：
做h5页面移动端开发需要在head标签内引入下面这句话。（如果没有引入的话，页面的字体等大小就不正常了）。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
具体含义如下：
Width: 控制viewport的大小。如device-width为设备的宽度。
initial-scale: 初始缩放比例，页面第一次加载时的缩放比例。
maximum-scale 允许用户缩放到的最大比例，范围从0到10.0
minimum-scale: 允许用户缩放到的最小比例，范围从0到10.0
user-scalable： 用户是否可以手动缩放，值可以是:
1.yes,true允许用户缩放；
2.no、false不允许用户缩放。 (只设置这一个属性，有的浏览器并不生效，我们需要配合maxinum-scale和mininum-scale最大缩放与最小缩放分别为1:1)。
四：理解css单位px，em，rem的区别：
1. Px是css中最基本的长度单位，在PC端，设计稿多少像素，页面css就写多少像素。
2. em 是相对单位，相对于上下文元素而言，一般情况下，浏览器默认的字体大小是16px，也就是1em等于16px；比如：
3. rem也是相对单位。rem是相对于html根元素来计算的，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同 em，默认1rem=16px; 同理你可以 设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。
比如设置html根元素 如下代码：
html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}
当一个p元素是24px的话，那么转换成rem为单位的话，那么只需要如下这样写即可：
p {font-size: 2.4rem; /*2.4 × 10px = 24px */ }
六：媒体查询标准写法：media queries
@media 设备类型 and (设备特性-宽度) {
// css 样式
}
在css2.1中定义了10种设备类型，分别如下：
可以指定的值 含义
all 所有设备
screen 显示器
print 打印用纸或打印预览视图
handled 便携设备
tv 电视机类型的设备
speech 语音和音频合成器
braille 盲人用点字法触觉回馈设备
embossed 盲人打印机
projection 各种投影设备
tty 使用固定密度字母栅格的媒介，比如电传打字机和终端
Css设备特性共有13种，是一个类似于CSS属性的集合。但与CSS属性不同的是，大部分设备特性的指定值接受min/max的前缀，用来表示大于等于或小于等于的逻辑，以此避免使用<和>这些字符。
设备特性如下表：
特性 可指定的值 是否允许使用min/max前缀 特性说明
width 带单位的长度数值 允许 浏览器窗口的宽度 css
height 带单位的长度数值 允许 浏览器窗口的高度
device-width 带单位的长度数值 允许 设备屏幕分辨率的宽度值
device-height 带单位的长度数值 允许 设备屏幕分辨率的高度值
orientation 只能指定两个值:portrait或landscape 不允许 窗口的方向是纵向还是横向
aspect-ratio 比例值，例如：16/9 允许 窗口的纵横比，比例值为浏览器窗口的宽度值/高度值
device-aspect-ratio 比例值，例如：16/9 允许 设备屏幕分辨率的纵横比，比例值为设备屏幕分辨率的宽度值/高度值
color 整数值 允许 设备使用多少位的颜色值，如果不是彩色设备，该值为0
color-index 整数值 允许 色彩表中的色彩数
monochrome 整数值 允许 单色帧缓冲器中每像素的字节数
resolution 分辨率值，譬如300dpi 允许 设备的分辨率
scan 只能指定两个值：progressive或interlace 不允许 电视机类型设备的扫描方式，progressive表示逐行扫描，interlace表示隔行扫描
grid 只能指定两个值:0或1 不允许 设备是基于栅格还是基于位图。基于栅格时该值为1，否则该值为0
上面是一些响应式web设计的基本知识点，下面我们可以详细讲解下响应式web设计如何实践？
1. 首先需要在页面头部引入这行meta代码，如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=0" />
还要引入这一句：
<meta content="telephone=no,email=no" name="format-detection" />
我们的代码有类似于电话这样的数字的时候，因为有的手机上它会自动转换成可以拨打电话，所以我们加上这句就不会了。
1.固定布局：固定布局以PX(像素)作为单位的，在PC端，设计稿多少PX就写多少PX，前几年都是这种布局，常见的是以960px或者1000px来设计的，但是这样设计有如下缺点：
1.1.页面很死板，在更大的屏幕上，页面左右2边留白。
1.2.不适应响应性布局。
2.流式布局：流式布局是以百分比作为单位的，我们要牢记如下公式：
百分比宽度 = 目标元素宽度 / 上下文元素宽度
这种布局优点：可以自适应布局，根据不同的分辨率显示不同的宽度。
缺点：在行高或者marginTop在大屏幕下看起来太高，在小屏幕下看起来太窄。
3.弹性布局：弹性布局是以em作为单位的，同样弹性布局也支持如下公式：
百分比尺寸 = 目标元素尺寸 / 上下文元素尺寸
使用em将文字像素px转换为相对单位，现在浏览器默认文字的大小是16px，如果一个文字大小是48px，上下文元素是(浏览器)，那么转换成em 就是 48/16 = 3em. 但是如果一个h1标签的font-size是48px, h1标签内部span标签font-size 是24px,那么h1标签的font-size = 48 / 16 = 3em h1 span {font-size = 24/16 =1.5em}.弹性布局也支持响应性web设计。
二： 媒体查询：
根据特定的环境查询各种属性值，比如设备的宽度，是否横向使用不同的css样式来渲染。
媒体查询使用如下：比如内联样式可以如下写：
1. 最大宽度960px一种布局：
@media screen and (max-width:960px) {<=960}
2. 最小宽度600px 另一种布局：
@media screen and (min-width:600px) {>=600}
3. 宽度在600px 到 960px之间，如下:
@media screen (min-width:600px) and (max-width:960px) {600<=x<=900}
4.外联样式使用link标签来引用样式：
<link rel=”stylesheet” href=”xx1.css” media=”screen and (max-width:960px)”/>
<link rel=”stylesheet” href=”xx2.css” media=”screen and (min-width:600px)”/>
<link rel=”stylesheet” href=”xx3.css” media=”screen and (min-width:600px) and (max-width):960px”/>
如果对于像ipad来说，我们可以在上面增加一个属性 orientation(landscape或portrait) 横屏或者竖屏。
理解meta各个属性的含义：
做h5页面移动端开发需要在head标签内引入下面这句话。（如果没有引入的话，页面的字体等大小就不正常了）。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
具体含义如下：
Width: 控制viewport的大小。如device-width为设备的宽度。
initial-scale: 初始缩放比例，页面第一次加载时的缩放比例。
maximum-scale 允许用户缩放到的最大比例，范围从0到10.0
minimum-scale: 允许用户缩放到的最小比例，范围从0到10.0
user-scalable： 用户是否可以手动缩放，值可以是:
1.yes,true允许用户缩放；
2.no、false不允许用户缩放。 (只设置这一个属性，有的浏览器并不生效，我们需要配合maxinum-scale和mininum-scale最大缩放与最小缩放分别为1:1)。
四：理解css单位px，em，rem的区别：
1. Px是css中最基本的长度单位，在PC端，设计稿多少像素，页面css就写多少像素。
2. em 是相对单位，相对于上下文元素而言，一般情况下，浏览器默认的字体大小是16px，也就是1em等于16px；比如：
3. rem也是相对单位。rem是相对于html根元素来计算的，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同 em，默认1rem=16px; 同理你可以 设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。
比如设置html根元素 如下代码：
html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}
当一个p元素是24px的话，那么转换成rem为单位的话，那么只需要如下这样写即可：
p {font-size: 2.4rem; /*2.4 × 10px = 24px */ }
六：媒体查询标准写法：media queries
@media 设备类型 and (设备特性-宽度) {
// css 样式
}
在css2.1中定义了10种设备类型，分别如下：
可以指定的值 含义
all 所有设备
screen 显示器
print 打印用纸或打印预览视图
handled 便携设备
tv 电视机类型的设备
speech 语音和音频合成器
braille 盲人用点字法触觉回馈设备
embossed 盲人打印机
projection 各种投影设备
tty 使用固定密度字母栅格的媒介，比如电传打字机和终端
Css设备特性共有13种，是一个类似于CSS属性的集合。但与CSS属性不同的是，大部分设备特性的指定值接受min/max的前缀，用来表示大于等于或小于等于的逻辑，以此避免使用<和>这些字符。
设备特性如下表：
特性 可指定的值 是否允许使用min/max前缀 特性说明
width 带单位的长度数值 允许 浏览器窗口的宽度 css
height 带单位的长度数值 允许 浏览器窗口的高度
device-width 带单位的长度数值 允许 设备屏幕分辨率的宽度值
device-height 带单位的长度数值 允许 设备屏幕分辨率的高度值
orientation 只能指定两个值:portrait或landscape 不允许 窗口的方向是纵向还是横向
aspect-ratio 比例值，例如：16/9 允许 窗口的纵横比，比例值为浏览器窗口的宽度值/高度值
device-aspect-ratio 比例值，例如：16/9 允许 设备屏幕分辨率的纵横比，比例值为设备屏幕分辨率的宽度值/高度值
color 整数值 允许 设备使用多少位的颜色值，如果不是彩色设备，该值为0
color-index 整数值 允许 色彩表中的色彩数
monochrome 整数值 允许 单色帧缓冲器中每像素的字节数
resolution 分辨率值，譬如300dpi 允许 设备的分辨率
scan 只能指定两个值：progressive或interlace 不允许 电视机类型设备的扫描方式，progressive表示逐行扫描，interlace表示隔行扫描
grid 只能指定两个值:0或1 不允许 设备是基于栅格还是基于位图。基于栅格时该值为1，否则该值为0
上面是一些响应式web设计的基本知识点，下面我们可以详细讲解下响应式web设计如何实践？
1. 首先需要在页面头部引入这行meta代码，如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=0" />
还要引入这一句：
<meta content="telephone=no,email=no" name="format-detection" />
我们的代码有类似于电话这样的数字的时候，因为有的手机上它会自动转换成可以拨打电话，所以我们加上这句就不会了。