CSS3弹性布局、响应式布局、PS

最新推荐文章于 2024-06-28 15:32:34 发布

Bub_ble___

最新推荐文章于 2024-06-28 15:32:34 发布

阅读量99

点赞数

分类专栏： HTML css 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/Bub_ble___/article/details/130188149

版权

HTML 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

响应式Web设计通过Viewport设置实现多终端兼容，网格视图提供12列布局方案，媒体查询允许按设备尺寸定制样式，图片使用width或max-width属性实现响应式，而Flex布局提供了灵活的容器和项目排列方式。

摘要由CSDN通过智能技术生成

一、响应式 Web 设计 - Viewport

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

1.什么是 Viewport

viewport 是用户网页的可视区域。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

2.设置 Viewport

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height：和 width 相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放。

二、响应式 Web 设计 - 网格视图

1.什么是网格视图

响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。

2.创建响应式网格视图

首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。

以下实例演示了简单的响应式网页，包含两列：

.menu {
    width: 25%;
    float: left;
}
.main {
    width: 75%;
    float: left;
}

12 列的网格系统可以更好的控制响应式网页。

首先我们可以计算每列的百分比: 100% / 12 列 = 8.33%。

在每列中指定 class， class="col-" 用于定义每列有几个跨度：

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

所有的列向左浮动，间距(padding) 为 15px：

[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}

每一行使用 <div> 包裹。所有列数加起来应为 12：

列中行为左浮动，并添加清除浮动：

.row:after {
    content: "";
    clear: both;
    display: block;
}

三、响应式 Web 设计 - 媒体查询

1.定义和使用

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

2.CSS语法

3.媒体类型

all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。

4.媒体功能

device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
max-width	定义输出设备中的页面最大可见区域宽度。
min-width	定义输出设备中的页面最小可见区域宽度。
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。

5.实例

结合CSS媒体查询,可以创建适应不同设备的方向(等)的布局。

orientation：portrait | landscape // 横屏landscape、竖屏portrait

portrait：指定输出设备中的页面可见区域高度大于或等于宽度

landscape：除portrait值情况外，都是landscape

如果是横屏背景将是浅蓝色：

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

四、响应式 Web 设计 - 图片

1.使用 width 属性

如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能：

img {
width: 100%;
height: auto;
}

注意在以上实例中，图片会比它的原始图片大。我们可以使用 max-width 属性很好的解决这个问题。

2.使用 max-width 属性

如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小：

img {
max-width: 100%;
height: auto;
}

3.背景图片

背景图片可以响应调整大小或缩放。

以下是三个不同的方法：

1.如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变：

2.如果 background-size 属性设置为 "100% 100%" ，背景图片将延展覆盖整个区域：

3.如果 background-size 属性设置为 "cover"，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此背景图像的某些部分无法显示在背景定位区域中。

4.不同设备显示不同图片

大尺寸图片可以显示在大屏幕上，但在小屏幕上确不能很好显示。我们没有必要在小屏幕上去加载大图片，这样很影响加载速度。所以我们可以使用媒体查询，根据不同的设备显示不同的图片。

以下大图片和小图片将显示在不同设备上：

/* For width smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}