（17）2020-12-23（三栏布局、视口、百分比布局、媒体查询）

2023-11-09 06:30
文章标签 2020 布局 查询 媒体 23 17 三栏 百分比 视口

本文主要是介绍（17）2020-12-23（三栏布局、视口、百分比布局、媒体查询），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

三栏布局、视口、百分比布局、媒体查询

    • 一、三栏布局
      • 三栏布局的实现方式
        • 1、圣杯布局
        • 2、双飞翼布局
        • 3、利用弹性盒子实现三栏
    • 二、视口
    • 三、流式布局 / 百分比布局
    • 四、媒体查询
      • 1、 媒体查询 实现方式
      • 2、 逻辑关键字
        • （1）逻辑与（and）
        • （2）逻辑或（，）
        • （3）逻辑非（not）
      • 3、 设备方向
      • 4、 常见的查询特性
      • 5、 示例：

一、三栏布局

在这里插入图片描述

三栏布局的实现方式

1、圣杯布局

  • 总结：
    1.在主体内部外面嵌套了一个div
    2.center在结构上靠前（写在left、right前）
    3.center，left，right都浮动
    4.给主体外面的div清除浮动
    5.center宽度为100%，left，right宽度固定
    6.left通过margin-left为负值（-100%），移动到center最左边
    7.right通过margin-left为负值（自身的宽度），移动到center的最右边。
    8.center的内容会被left，right遮盖
    9.主体外面的div添加一个padding，padding的宽度为left，right的宽度。
    10，left，right相对定位，移动到相应的位置。位移量为自身的宽度。
    11，最后可以给body设置最小宽度和最大宽度。

  • 代码

    <style>*{margin: 0;padding: 0;}body{font-size: 50px;/* 设置body的最小宽度 */min-width: 620px;/* 设置body的最大宽度 */max-width: 1000px;}header,footer{width: 100%;height: 100px;background-color: tan;line-height: 100px;text-align: center;}.left,.right,.center{float: left;height: 400px;line-height: 400px;/* text-align: center; */}/* 左右两侧宽度固定 */.left,.right{width: 200px;}/* center宽度自适应 */.center{width: 100%;background-color: teal;}.left{margin-left: -100%;background-color: thistle;position: relative;left: -200px;}.right{margin-left: -200px;background-color: tomato;position: relative;right: -200px;}.clearfix{padding: 0px 200px;}.clearfix::after{clear: both;display: block;content: "";}/* 总结：1.在主体内部外面嵌套了一个div 2.center在结构上靠前（写在left、right前）3.center，left，right都浮动4.清除浮动5.center宽度为100%，left，right宽度固定6.left通过margin-left为负值（-100%），移动到center最左边7.right通过margin-left为负值（自身的宽度），移动到center的最右边。8.center的内容会被left，right遮盖9.最外层div添加一个padding，padding的宽度为left，right的宽度。10，left，right相对定位，移动到相应的位置。位移量为自身的宽度。11，最后可以给body设置最小宽度和最大宽度。*/</style>
</head>
<body><header>header</header><div class="clearfix"><div class="center">center</div><div class="left">left</div><div class="right">right</div></div><footer>footer</footer>
</body>
2、双飞翼布局

  • 总结：
    1,，让left、 right、 center浮动
    （footer上面的元素都浮动了，给footer清除浮动影响。给footer添加属性cleaf：both;）
    2，center宽度不设置，自适应。left、right宽度固定。
    3，设置left的margin-left为-100%，使left移动到center左边。
    4，设置right的margin-left为负的自身宽度，使right移动到center右边。
    5，在center中添加一个div，将内容写在这个div中
    6，为这个div添加一个margin，左右margin的值为left 、right的宽度。给left、right留出宽度，使得center中的内容不受left、right遮盖。
    7，最后可以给body设置最小宽度和最大宽度。

  • 代码：

    <style>* {margin: 0;padding: 0;}body {font-size: 50px;/* 设置body的最小宽度 */min-width: 620px;/* 设置body的最大宽度 *//* max-width: 1000px; */}header,footer {width: 100%;height: 100px;background-color: tan;text-align: center;line-height: 100px;}/* 让left、right、center都浮动 */.left,.right,.center{float: left;height: 400px;line-height: 400px;/* text-align: center; */}/* center宽度不设置，自适应 */.center{width: 100%;background-color: teal;}/* left、right宽度固定 */.left,.right{width: 200px;}/* 设置left的margin-left为-100%，移动到center左边 */.left{margin-left: -100%;background-color: thistle;}/* 设置right的margin-left为负的自身宽度，移动到center右边 */.right{margin-left: -200px;background-color: tomato;}/* 通过给home设置左右margin等于left、right的宽度。使得center中的内容不受left、right遮盖 */.home{margin: 0 200px;}/* footer上面的元素都浮动了，给footer清除浮动影响 */footer{clear: both;}</style>
</head><body><header>header</header><div class="center"><div class="home">center</div></div><div class="left">left</div><div class="right">right</div><footer>footer</footer>
</body>
3、利用弹性盒子实现三栏
  • 总结：
    1，给主体部分（center、left、right）外面添加一个div，类名为home。
    2，将这个类名为home的div设置为弹性盒子。（display：flex；）
    3，left、right固定宽度。center不设置宽度
    4，将center设置为flex-grow：1;
    5，利用order属性调整left、center、right的排列顺序。元素的order值越小，元素越靠前。
    （left设置order值为1，center设置order值为2，right设置order值为3）
    <style>*{margin: 0;padding: 0;}body{font-size: 50px;/* 设置body的最小宽度 */min-width: 620px;}header,footer{width: 100%;height: 100px;background-color: tan;text-align: center;line-height: 100px;}.home{display: flex;width: 100%;height: 400px;font-size: 50px;line-height: 400px;/* text-align: center; */}.left,.right{width: 200px;background-color: brown;}.center{flex-grow: 1;background-color: cadetblue;}.left{order: 1;}.center{order: 2;}.right{order: 3;}/* 1.添加一个最外层的div home2.将home设置为弹性盒子3.left right 固定宽度 center不设置宽度4.将center设置为 flex-grow: 1;5.调整顺序，left：1 center：2 right：3*/</style>
</head>
<body><header>header</header><div class="home"><div class="center">center</div><div class="left">left</div><div class="right">right</div></div><footer>footer</footer>
</body>

二、视口

分辨率：屏幕中像素的数量。 PC端常见的分辨率 1920*1080。

手机分辨率一般比较高。

问题：
如果用手机的真实分辨率去呈现网页，网页整体看起来会特别小。

苹果乔布斯在推出iPhone4的时候，为了让页面完整显示在手机上，推出了视口这个概念,让手机浏览器默认为980px。
当前这个980就是视口的宽度。

移动端布局：
1.响应式
2.分别开发两套代码

视口：
（1） 布局视口 ：网页的宽度
（2） 视觉视口： 用户可以看到的网站的区域
（3）理想视口： 视觉视口=布局视口

不同的移动设备因为分辨率，屏幕尺寸等问题，造成视觉视口不同，那么理想视口也会不同。

<script>// 获取页面中第一个h1标签var h1 = document.getElementsByTagName("h1")[0];h1.innerHTML = document.documentElement.clientWidth;
</script>

<head><meta charset="UTF-8"><!-- 让不同的设备自适应理想视口 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 自定义视口的宽度 --><!-- <meta name="viewport" content="width=300px"> --><title>Document</title>

三、流式布局 / 百分比布局

流式布局: 百分比布局。

  • 标准文档流或浮动之后子盒子的：

宽：相对于父盒子内容宽度的比值。
高：相对于父盒子内容高度的比值。
padding/margin：相对于父盒子内容宽度的比值。

  • 绝对定位之后子盒子的：

宽/padding/margin：相对于定位盒子的宽+左右padding的比值。
高：相对于定位盒子的高+上下padding的比值。

【注】border：不能使用百分数。

四、媒体查询

  • 设备：
    1、 屏幕：PC、 手机端
    2、 打印机
    3、 屏幕阅读器

  • 尺寸：
    常见尺寸 320-420之间

  • 响应式网页：同一个网页，在不同的条件下，使用不同的样式。

  • rem布局/百分比布局：等比例缩放。

  • 【注】
    使用min-width时，通常将小的条件放在前面。
    使用max-width时，通常将大的条件放在前面

1、 媒体查询 实现方式

（1） 内嵌式
格式：@media 设备名 逻辑关键词（and or not）（条件）{
样式；
}
（2）外链式:
通过link标签引入样式，再通过media属性设置样式引用的条件。

   <title>Document</title><link rel="stylesheet" href="css/m1.css" media="screen and (max-width:1200px)"><link rel="stylesheet" href="css/m2.css" media="screen and (max-width:800px)">

2、 逻辑关键字

and ：逻辑与，须满足多个条件。
, ：逻辑或，多个条件中满足一个条件即可。
not ：逻辑非， 只要不满足该条件就会生效。

（1）逻辑与（and）

可以使用多个and连接多个条件。

    <title>Document</title><style>@media screen and (orientation: landscape) and (min-width: 580px){body{background-color: crimson;}            }</style>

    <title>Document</title><style>/* 设备是屏幕设备  宽度小于等于1500px  */@media screen and (max-width:1500px){body{background-color: brown;}}/* 设备是屏幕设备  宽度小于等于1200px  */@media screen and (max-width:1200px) {body{background-color: cadetblue;}}        </style>
（2）逻辑或（，）

使用，隔开。

    <style>/* 使用，隔开条件 *//* 屏幕设备 或者 宽度大于等于1200px */@media print ,(min-width: 1200px) {h1{color: brown;}}</style>
（3）逻辑非（not）
    <title>Document</title><style>@media not screen {h1{color: brown;}}</style>

3、 设备方向

orientation 属性可以定义设备的方向
（1） portrait 竖屏设备 ， 高度大于宽度
（2） landscape 横屏设备 ，宽度大于高度

    <title>Document</title><style>@media screen and (orientation:landscape){body{background-color: brown;}}</style>

4、 常见的查询特性

orientation 设备的方向。landscape横屏设备， portrait竖屏设备
width 设备的宽度
height 设备的高度
min-width 最小宽度
max-width 最大宽度
min-height 最小高度
max-height 最大高度

5、 示例：

（1）内嵌式，逻辑与（and）

    <style>        /* 屏幕设备 宽度大于等于800px时生效 */@media screen and (min-width: 800px){body{background-color: cadetblue;}}/* 屏幕设备宽度大于等于1200px时生效 */@media screen and (min-width: 1200px){body{background-color: brown;}}        </style>

    <style>/* 设备是屏幕设备  宽度小于等于1500px  */@media screen and (max-width:1500px){body{background-color: brown;}}/* 设备是屏幕设备  宽度小于等于1200px  */@media screen and (max-width:1200px) {body{background-color: cadetblue;}}        </style>

这篇关于（17）2020-12-23（三栏布局、视口、百分比布局、媒体查询）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/374445。

相关文章

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法：多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析
阅读更多...
从入门到精通MySQL联合查询

从入门到精通MySQL联合查询

《从入门到精通MySQL联合查询》：本文主要介绍从入门到精通MySQL联合查询,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下... 目录摘要1. 多表联合查询时mysql内部原理2. 内连接3. 外连接4. 自连接5. 子查询6. 合并查询7. 插入查询结果摘要前面我们学习了数据库设计时要满
阅读更多...
MySQL查询JSON数组字段包含特定字符串的方法

MySQL查询JSON数组字段包含特定字符串的方法

《MySQL查询JSON数组字段包含特定字符串的方法》在MySQL数据库中,当某个字段存储的是JSON数组,需要查询数组中包含特定字符串的记录时传统的LIKE语句无法直接使用,下面小编就为大家介绍两种... 目录问题背景解决方案对比1. 精确匹配方案（推荐）2. 模糊匹配方案参数化查询示例使用场景建议性能优
阅读更多...
mysql表操作与查询功能详解

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE
阅读更多...
MySQL数据库的内嵌函数和联合查询实例代码

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面：本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN
阅读更多...
XML重复查询一条Sql语句的解决方法

XML重复查询一条Sql语句的解决方法

《XML重复查询一条Sql语句的解决方法》文章分析了XML重复查询与日志失效问题,指出因DTO缺少@Data注解导致日志无法格式化、空指针风险及参数穿透,进而引发性能灾难,解决方案为在Controll... 目录一、核心问题：从SQL重复执行到日志失效二、根因剖析：DTO断裂引发的级联故障三、解决方案：修复
阅读更多...
mysql查询使用_rowid虚拟列的示例

mysql查询使用_rowid虚拟列的示例

《mysql查询使用_rowid虚拟列的示例》MySQL中,_rowid是InnoDB虚拟列,用于无主键表的行ID查询,若存在主键或唯一列,则指向其,否则使用隐藏ID（不稳定）,推荐使用ROW_NUM... 目录1. 基本查询（适用于没有主键的表）2. 检查表是否支持 _rowid3. 注意事项4. 最佳实
阅读更多...
MySQL存储过程之循环遍历查询的结果集详解

MySQL存储过程之循环遍历查询的结果集详解

《MySQL存储过程之循环遍历查询的结果集详解》：本文主要介绍MySQL存储过程之循环遍历查询的结果集,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录前言1. 表结构2. 存储过程3. 关于存储过程的SQL补充总结前言近来碰到这样一个问题：在生产上导入的数据发现
阅读更多...
MySQL JSON 查询中的对象与数组技巧及查询示例

MySQL JSON 查询中的对象与数组技巧及查询示例

《MySQLJSON查询中的对象与数组技巧及查询示例》MySQL中JSON对象和JSON数组查询的详细介绍及带有WHERE条件的查询示例,本文给大家介绍的非常详细,mysqljson查询示例相关知... 目录jsON 对象查询1. JSON_CONTAINS2. JSON_EXTRACT3. JSON_TA
阅读更多...
MYSQL查询结果实现发送给客户端

MYSQL查询结果实现发送给客户端

《MYSQL查询结果实现发送给客户端》：本文主要介绍MYSQL查询结果实现发送给客户端方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql取数据和发数据的流程（边读边发）Sending to clientSending DataLRU(Least Rec
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2