响应式设计-网页CSS样式知识

百分比布局
弹性布局
网格布局
最大最小宽度
视图窗口
多媒体查询
- 最大最小宽度
- 竖屏横屏
- 尺寸比
容器属性
容器查询单位
伪类has

百分比布局

简单的讲就是将元素按照百分比去划分宽度，配合行内元素属性或者浮动达成响应式，如：


<style>.item {float: left;width: 49%;padding: calc(1% - 10px)}
</style>
<ul class="container"><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li><li class="item">6</li><li class="item">7</li><li class="item">8</li>
</ul>

弹性布局

弹性布局既使用flex属性对所有子元素指定统一水平或垂直的布局方式，让子元素根据设定自动完成宽度或高度的适应。
由于特性决定更适合单行或者单列展示内容，例如快捷功能入口、Tab选项卡栏等。
如：


<style>/*指定横向显示，并且内容分布方式为间隔相等（无论不同内容之间是否相同宽度）*/.container {display: flex;flex-direction: row;justify-content: space-around;}.item {width: 300px;max-width: 25%;}
</style>
<ul class="container"><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li>
</ul>
<ul class="container"><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li>
</ul>

网格布局

网格布局就是通过grid属性完成网格形式的布局，和flex一样有很多配套的额外属性，相比flex布局好处在于适合多行重复的相同内容，例如产品列表、视频列表。


<style>/*指定每行显示4个，宽度自动，网格间距通过gap指定*/.container {display: grid;gap: 1vw; /*使用视口宽度单位*/grid-template-columns: repeat(4, auto)}
</style>
<ul class="container"><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li><li class="item">6</li><li class="item">7</li><li class="item">8</li>
</ul>

最大最小宽度

通过设定最大最小宽度来限制类似百分比设定的元素，达成有限制的响应式变化：

.item {width: 70%;min-width: 300px;max-width: 600px;
}

也可以通过最新的clamp(min, normal, max)属性达成类似目标，如：

.item {width: clamp(1rem, 1.2vw, 2rem)
}

上述两种方式要注意除了最大最小值外，指定的单位必须是百分比或者vw、flex:1这种会根据窗口或父元素大小自动变化数值的，否则最大最小值的限制将失去意义。

视图窗口

网页本身是作为一个视窗存在，它是可以按照需要变成和窗口大小不一样的，导致一般针对PC端设计的页面，在手机上是必须通过双指缩放来调整视窗的大小，从而看清楚要浏览的内容。
一般通过meta:viewport指定宽度为当前所用设备的宽度，并且禁止缩放功能来完成手机端适配工作：


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

当然也有将通过指定宽度和缩放比来完成设配的方式：


<meta name="viewport" content=""/>
<script>function scaleMatch() {//  方式1：直接通过占比像素点（1x/2x/3x）执行缩放，每个位置像素点越高，缩放就越厉害，更注重保持图片的高质量，但使用像素单位的其他元素也会受影响导致缩小// document.querySelector("meta[name=viewport]").content = 'width=device-width, initial-scale=' + (1 / window.devicePixelRatio) + ', user-scalable=no';//  方式2：通过一开始固定宽度来决定最后的缩放比例，能确保像素单位元素能自动配合屏幕缩放，相比质量更更注重按照像素设计稿一比一还原。const width = 750document.querySelector("meta[name=viewport]").content = "width=" + width + "px,user-scalable=no;initial-scale=" + 750 / window.width}window.addEventListener("DOMContentLoaded", function () {scaleMatch()})window.addEventListener("resize", function () {scaleMatch()})
</script>
<h1 style="font-size: 1.5rem">标题根据屏幕尺寸变化</h1>

多媒体查询

多媒体查询可以通过指定当设备满足条件时，展示不同的样式。

最大最小宽度

以下例子通过判断在大屏时一行显示三个元素，当屏幕中等大小时一行显示两个元素，当小屏幕时，一行显示一个元素：

.item {float: left;width: 33.3%;
}/* 指定宽度小于1000像素时的样式 */
@media (max-width: 1000px) {.item {width: 50%;}
}/* 指定宽度小于300像素时的样式 */
@media (max-width: 300px) {.item {width: 100%;}
}

另一种指定最大最小宽度的方式：

.item {float: left;width: 33.3%;
}
/* 指定当宽度介于300像素和1000像素之间时的样式 */
@media (300px < width <= 1000px) {.item {width: 50%;}
}

竖屏横屏

媒体查询还可以直接指定横屏和竖屏时的样式，不过这实际查询的不是横屏竖屏，而单纯是宽度和高度比，如果宽度更长则视为横屏，如果高度更长则视为竖屏：

/* 横屏 */
@media (orientation: landscape) {.item {width: 25%;}
}/* 竖屏 */
@media (orientation: portrait) {.item {width: 50%;}
}

尺寸比

通过指定宽高比例来展示不同样式，很明显适合对尺寸比有精确要求的类型，例如画作、聚集元素大小不一致的情况：

/* 当宽度和高度比例大于16：9时时 */
@media (min-aspect-ratio: 16/9) {}/* 当宽度和高度比例为小于4：3时 */
@media (max-aspect-ratio: 4/3) {}

容器属性

目前推行情况只有谷歌、微软和苹果浏览器支持，作为一个未来时属性提前了解一下。
容器属性可以让父元素符合要求时展示不同样式：


<style>/* 定义容器条件和样式 */.card-item {width: 100%;}@container card (width >= 600px) {.card-item {width: 50%;}}/* 调用时在作为容器的父元素上里指定容器类型和名称即可 */.card-container {container-type: inline-size;container-name: card;}
</style>
<ul class="card-container"><li class="card-item">1</li><li class="card-item">2</li><li class="card-item">3</li><li class="card-item">4</li>
</ul>

容器查询单位

可用的单位有：

cqw: Container Query Width 容器查询宽度
cqh: Container Query Height 容器查询宽度
cqmin: 容器中取宽高最小的一个作为标准，即容器查询最小边
cqmax: 容器中取宽高最大的一个作为标准，即容器查询最大边

取值方式和vw、vh、vmin、vmax相似，1=1%，只不过vw是相对于设备宽高，而cq是相对于作为容器的父元素，例如1cqw即相对于容器的1%宽度，如果容器宽度是1000px，1cqw则是1000x0.1=100px。


<style>.info {font-size: clamp(12px, calc(100cqw / 20), 60px);}
</style>
<div class="contain"><p class="info">这些内容将会根据容器div大小变化而变化，通过自动变化文字大小，完成固定每行显示20个文字，并且设定最小和最大像素值 </p>
</div>

CSS Container Queries属性

伪类has

用来判断是否存在子元素，若存在则样式生效，下面是若存在标题则为容器添加边框：


<style>/*判断当存在标题子元素时就显示*/.container:has(.title) {border: 1px solid #000;}
</style>
<div class="container"><h5 class="title">这就是标题</h5><p class="content">这就是详细内容</p>
</div>

若将title元素去除，边框样式将失效。

CSS样式－网页响应式设计相关推荐

[css] 你对响应式设计的理解是什么？知道它基本的原理是吗？要想兼容低版本的IE怎么做呢？
[css] 你对响应式设计的理解是什么?知道它基本的原理是吗?要想兼容低版本的IE怎么做呢? 理解:在不同系统,不同设备,不同尺寸的界面,有良好的用户体验,舒适的阅读体验,交互体验. 原理:根据不同设 ...
如何固定最小宽度_如何使用更新的HTML和CSS函数创建响应式设计
除了使用媒体查询和现代css布局(如flexbox和grid)来创建响应式网站外,我们还可以做好某些被忽视的事情来制作响应式网站.在本文中,我们将探讨许多可用的工具(围绕html和css),从响应图像 ...
rem、px、em之间的区别以及网页响应式设计写法
个人收藏用,转载自:http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激 ...
HTML学习笔记之类、布局、响应式设计（九）
9.类.布局.响应式设计 9.1类使用style标签设置样式颜色 div块儿级元素  <html> <head> <style> . ...
网页规划与设计HTML5+CSS大作业——响应式个人简历介绍(5页)-模板下载
HTML5+CSS大作业--响应式个人简历介绍(5页)-模板下载常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. ...
转自CSDNattilax的专栏：自适应网页设计跟响应式设计的区别跟原理and实践总结...
响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 设计思路Mobile First 2 #---手机and平板分辨率 ...
Web前端知识CSS（响应式设计）
1.什么是响应式设计也叫响应式布局,响应式开发实现不同屏幕分辨率的终端上浏览网页的不同展示方式. 响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局,从而在每种设备屏幕宽度下呈现的界面是不同的 ...
网页布局响应式设计
一.为什么要使用响应式设计? 我们想让我们的网站通过响应用户的行为.设备的屏幕大小和屏幕方向,从而在所有设备上都能用. 二.一个碎片化的世界截止2013年,有成千上万种不同的设备在浏览网页,所以我们 ...
CSS框架+响应式设计
简介: Pure是来自雅虎的CSS框架,使用Normalize.CSS无需任何JavaScript代码.框架基于响应式设计,提供多种样式的组件,包括表格.表单.按钮.表.导航等.标识使用非常简单,整个 ...

CSS样式－网页响应式设计

响应式设计-网页CSS样式知识

百分比布局

弹性布局

网格布局

最大最小宽度

视图窗口

多媒体查询

最大最小宽度

竖屏横屏

尺寸比

容器属性

容器查询单位

伪类has

CSS样式－网页响应式设计相关推荐

最新文章

热门文章