响应式布局

Posted 2021-01-25 gaoguowen

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应式布局相关的知识，希望对你有一定的参考价值。

响应式布局：网站能够兼容多个终端——而不是为每个终端做一个特定的版本。　　　

优点：

面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
多方面因素影响而达不到最佳效果，一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

说到响应式设计，离不开媒体查询media

CSS3的新增内容Media Query（媒介查询）：通过不同的媒介类型和条件定义样式表规则

参数：

设备宽和高device-width，device-height显示屏幕/触觉设备。
渲染窗口的宽和高width，height显示屏幕/触觉设备。
设备的手持方向，横向还是竖向orientation（portrait|lanscape）和打印机等。
画面比例aspect-ratio点阵打印机等。
设备比例device-aspect-ratio-点阵打印机等。
对象颜色或颜色列表color，color-index显示屏幕。
设备的分辨率resolution。

用法

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

条件必须用括号()包起来，否则无效

一、link中使用@media：

<link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/>
<!--only可省略 max-width：渲染界面最大宽度 max-device-width：设备最大宽度。 -->

二、样式表中内嵌@media：

@media (min-device-width:1024px) and (max-width:989px),
screen and (max-device-width:480px),
(max-device-width:480px) and (orientation:landscape),
(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {
/*规则 ：
  字符间以空格相连，选取条件包含在小括号内
  only（限定某种设备，可省略）
  and（逻辑与）
  not（排除某种设备）为逻辑关键字
  多种设备用逗号分隔

 */

   font-size:1rem;
}
/*电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。 */

可媒体类型参数：

类型	可选值
all	所有设备
print	文档打印或打印预览模式
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备

逻辑关键字：

参数	说明
only	限定某种类型
and	逻辑与，连接设备与选择条件
not	排除某种设备
*	设备列表

媒体功能：

参数	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。

通过Media Queries实现响应式布局设计

头部<head></head>之间加上下面这句∶

<!--移动设备上设置原始大小显示和是否缩放的声明。-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

参数设置∶

width – viewport的宽度
height – viewport的高度
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放

当浏览器的可视区域小于768px

/* 禁用iPhone中Safari的字号自动调整 */
html {
-webkit-text-size-adjust: none;
}

@media screen and ( max-width: 768px ) {
div {
    width:8.33%;
    }
}

当浏览器的可视区域大于等于768px

@media screen and ( min-width: 768px ) {
div {
    width:8.33%;
    }
}

以上是关于响应式布局的主要内容，如果未能解决你的问题，请参考以下文章

一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局

H5响应式布局响应式图片响应式布局网站怎么写？

响应式布局

grid实现响应式布局

响应式布局

响应式布局

类型

可选值

参数

说明

媒体功能：