响应式网页设计------------宗旨：始终为移动优先设计

最新推荐文章于 2024-09-03 16:14:28 发布

猫头嘤

最新推荐文章于 2024-09-03 16:14:28 发布

阅读量532

点赞数

文章标签： css 响应式

本文链接：https://blog.csdn.net/WEQ3323/article/details/98481653

版权

宗旨：始终为移动优先设计

响应式网页设计 - 简介

什么是响应式网页设计？

响应式网页设计使您的网页在所有设备上都很好看。

响应式网页设计仅使用HTML和CSS。

响应式网页设计不是程序或JavaScript。

为所有用户设计最佳体验

可以使用许多不同的设备查看网页：台式机，平板电脑和手机。无论设备如何，您的网页都应该看起来不错，并且易于使用。网页不应该遗漏信息以适应较小的设备，而是调整其内容以适应任何设备：

桌面

片剂

电话

响应式网页设计 - 视口

什么是视口？

视口是用户在网页上的可见区域。

视口因设备而异，并且在手机上比在计算机屏幕上小。

在平板电脑和移动电话之前，网页仅针对计算机屏幕设计，并且网页通常具有静态设计和固定大小。

然后，当我们开始使用平板电脑和手机上网时，固定大小的网页太大而无法容纳视口。为了解决这个问题，这些设备上的浏览器按比例缩小整个网页以适应屏幕。

这不完美!! 但快速修复。

设置视口

HTML5引入了一种方法，让网页设计师通过<meta>标签控制视口。

您应该<meta>在所有网页中包含以下视口元素：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

一个<meta>视元素对如何控制网页的尺寸和缩放浏览器的说明。

该width=device-width部件将页面宽度设置为遵循设备的屏幕宽度（具体取决于设备）。

该initial-scale=1.0部分设置浏览器首次加载页面时的初始缩放级别。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式网页设计 - 视口</title>

</head>
<body>
<div>
    <img src="http://img1.imgtn.bdimg.com/it/u=1563980539,1672265910&fm=26&gp=0.jpg" alt="" width="600">
    <p>
        中国是一个有5000年悠久历史的东方文明古国。独具特色的传统文化、丰富多彩的民族习俗以及美丽的风格示例景一直吸引着世界的目光。的历史使中国继承了一份十分宝贵的世界文化和自然遗产，它们是人类的共同中国是一个有5000年悠久历史的东方文明古国。独具特色的传统文化、丰富多彩的民族习俗以及美丽的风格示例景一直吸引着世界的目光。
    </p>
</div>
</body>
</html>

视口大小内容

用户用于在桌面和移动设备上垂直滚动网站 - 但不是水平滚动！

因此，如果用户被迫水平滚动或缩小，以查看整个网页，则会导致糟糕的用户体验。

一些额外的规则要遵循：

1.不要使用大的固定宽度元素 -

例如，如果图像的宽度比视口宽，则可能导致视口水平滚动。请记住调整此内容以适合视口的宽度。

2.不要让内容依赖于特定的视口宽度来渲染 -

由于CSS像素中的屏幕尺寸和宽度在不同设备之间变化很大，因此内容不应依赖于特定的视口宽度来渲染。

3.使用CSS媒体查询为小屏幕和大屏幕应用不同的样式 -

为页面元素设置较大的绝对CSS宽度将导致元素对于较小设备上的视口而言过宽。相反，请考虑使用相对宽度值，例如宽度：100％。另外，请注意使用大的绝对定位值。它可能导致元素落在小型设备上的视口之外。

响应式网页设计 - 网格视图

什么是网格视图？

许多网页都基于网格视图，在设计网页时，使用网格视图非常有用。它可以更轻松地在页面上放置元素。响应式网格视图通常有12列，总宽度为100％，并在调整浏览器窗口大小时缩小和展开。

构建响应式网格视图

首先确保所有HTML元素都box-sizing设置为属性 border-box。这可确保填充和边框包含在元素的总宽度和高度中。

在CSS中添加以下代码：

* {
  box-sizing: border-box;
}

以下示例显示了一个简单的响应式网页，其中包含两列：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing: border-box;
        }

        .header {
            border: 1px solid red;
            padding: 15px;
        }

        .menu {
            width: 25%;
            float: left;
            padding: 15px;
            border: 1px solid red;
        }

        .main {
            width: 75%;
            float: left;
            padding: 15px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<div class="header">
    <h1>Chania</h1>
</div>

<div class="menu">
    <ul>
        <li>The Flight</li>
        <li>The City</li>
        <li>The Island</li>
        <li>The Food</li>
    </ul>
</div>

<div class="main">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

如果网页只包含两列，则上面的示例很好。

但是，我们希望使用具有12列的响应式网格视图，以便更好地控制网页。

首先，我们必须计算一列的百分比：100％/ 12列= 8.33％。

然后我们为12列中的每一列创建一个类，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%;}

所有这些列应该浮动到左侧，并且填充为15px：

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

每行应包裹在一个<div>。行内的列数应始终加起来为12：

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

行内的列全部浮动到左侧，因此从页面流中取出，其他元素将被放置，就好像列不存在一样。为了防止这种情况，我们将添加一个清除流程的样式：

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.header {
  border: 1px solid red;
  padding: 15px;
}

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

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

.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%;}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">

<div class="col-3">
  <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
  </ul>
</div>

<div class="col-9">
  <h1>The City</h1>
  <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</div>
</body>
</html>

响应式网页设计 - 媒体查询

什么是媒体查询？

媒体查询是CSS3中引入的CSS技术。

@media仅当某个条件为真时，它才使用该规则包含一个CSS属性块。

举例

如果浏览器窗口为600px或更小，则背景颜色为浅蓝色：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>媒体查询</title>
    <style>
        body{
            background: lightgreen;
        }
        @media only screen and (max-width: 600px){
            body{
                background: lightblue;
            }
        }
    </style>
</head>
<body>

</body>
</html>

添加断点

媒体查询可以提供帮助。我们可以添加一个断点，其中设计的某些部分在断点的每一侧都会表现不同。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网格系统+媒体查询</title>
    <style>
        *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        [class*="col-"] {
            width: 100%;
        }
        @media only screen and (min-width: 600px){
            .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%;}
        }
        @media only screen and (min-width: 768px){
            .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%;}
        }

        [class*="col-"] {
            float: left;
            padding: 15px;
        }
        .row::after {
            content: "";
            clear: both;
            display: block;
        }
        header{
            padding: 16px;
            background: skyblue;
            text-align: center;
        }
        .left>ul{
            list-style: none;
        }
        .left>ul>li{
            background: lightblue;
            padding: 10px;
            margin: 10px;
            text-align: center;
            color: white;
        }
        .left>ul>li:hover{
            background: dodgerblue;
        }
        .left>ul>li:last-child{
            background: white;
            padding: 20px;
        }
        .center>div{
            padding: 10px;
            margin: 10px;
            box-shadow: -10px -10px 10px gray;
        }
        .center>div>p{
            margin: 18px;
            text-indent: 20px;
        }
        .center>div>ul{
            margin: 30px;
        }
        .center>div>ul>li{
            margin: 10px;
        }
        .rightList{
            padding: 10px;
            margin: 10px;
            background: lightsteelblue;
        }
        .rightList>h3{
            padding: 7px;
            text-align: center;
        }
        .rightList>p{
            text-align: center;
        }
        footer{
            padding: 15px;
            background: skyblue;
            font-size: 18px;
            text-align: center;
        }

    </style>
</head>
<body>
    <header>
        <h1>Java</h1>
    </header>
    <div class="row main">
        <div class="left col-3 col-4">
            <ul>
                <li>Java 简介</li>
                <li>Java 开发环境配置</li>
                <li>Java 基础语法</li>
                <li>Java 对象和类</li>
                <li>
                    <img src="https://www.runoob.com/wp-content/uploads/2013/12/java.jpg" width="100%">
                </li>
            </ul>
        </div>
        <div class="center col-6 col-8">
            <div>
                <h2>Java 简介</h2>
                <p>
                    Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称。由James Gosling和同事们共同研发，并在1995年正式推出。
                </p>
                <p>
                    Java分为三个体系：
                </p>
                <ul>
                    <li>JavaSE（J2SE）（Java2 Platform Standard Edition，java平台标准版）</li>
                    <li>JavaEE(J2EE)(Java 2 Platform,Enterprise Edition，java平台企业版)</li>
                    <li>JavaME(J2ME)(Java 2 Platform Micro Edition，java平台微型版)。</li>
                </ul>
                <p>
                    2005年6月，JavaOne大会召开，SUN公司公开Java SE 6。此时，Java的各种版本已经更名以取消其中的数字"2"：J2EE更名为Java EE, J2SE更名为Java SE，J2ME更名为Java ME。
                </p>
                <h2>主要特性</h2>
                <ul>
                    <li>
                        Java语言是简单的：
                    </li>
                    <p>
                        Java语言的语法与C语言和C++语言很接近，使得大多数程序员很容易学习和使用。另一方面，Java丢弃了C++中很少使用的、很难理解的、令人迷惑的那些特性，如操作符重载、多继承、自动的强制类型转换。特别地，Java语言不使用指针，而是引用。并提供了自动的废料收集，使得程序员不必为内存管理而担忧。
                    </p>
                </ul>
            </div>
        </div>
        <div class="right col-3 col-12">
            <div class="rightList">
                <h3>What?</h3>
                <p>Chania is a city on the island of Crete.</p>
            </div>
            <div class="rightList">
                <h3>Where?</h3>
                <p>Crete is a Greek island in the Mediterranean Sea.</p>
            </div>
            <div class="rightList">
                <h3>How?</h3>
                <p>You can reach Chania airport from all over Europe.</p>
            </div>
        </div>
    </div>
    <footer>
         Resize the browser window to see how the content respond to the resizing.
    </footer>
</body>
</html>

典型设备断点

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>典型设备断点</title>
    <style>
        .app{
            padding: 20px;
            text-align: center;
        }
        /* Extra small devices (phones, 600px and down) */
        @media only screen and (max-width: 600px) {
            .app{
                background: lightblue;
            }
        }

        /* Small devices (portrait tablets and large phones, 600px and up) */
        @media only screen and (min-width: 600px) {
            .app{
                background: lightseagreen;
            }
        }

        /* Medium devices (landscape tablets, 768px and up) */
        @media only screen and (min-width: 768px) {
            .app{
                background: lightcoral;
            }
        }

        /* Large devices (laptops/desktops, 992px and up) */
        @media only screen and (min-width: 992px) {
            .app{
                background: lightsalmon;
            }
        }

        /* Extra large devices (large laptops and desktops, 1200px and up) */
        @media only screen and (min-width: 1200px) {
            .app{
                background: lightslategrey;
                color: white;
            }
        }

    </style>
</head>
<body>
    <div class="app">
         <h2>典型设备断点</h2>
         <p>有大量的屏幕和设备具有不同的高度和宽度，因此很难为每个设备创建精确的断点。</p>
    </div>
</body>
</html>

使用媒体查询隐藏元素

使用媒体查询更改字体大小

响应式网页设计 - 图像

使用width属性

如果width属性设置为百分比并且高度设置为“自动”，则图像将响应并向上和向下缩放：

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

使用max-width属性(推荐)

如果max-width属性设置为100％，则图像将缩小（如果必须），但从不缩放到大于其原始大小：

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

背景图片

背景图像还可以响应调整大小和缩放。

1.background-size: contain;

2.background-size: 100% 100%;

3.background-size: cover;

不同设备的不同图像

大型图像在大型计算机屏幕上可以是完美的，但在小型设备上却无用。为什么在必须缩小尺寸时加载大图像？要减少负载或出于任何其他原因，您可以使用媒体查询在不同设备上显示不同的图像。

一个大图像和一个较小的图像，将显示在不同的设备上：

/* 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'); 
  }
}

您可以使用媒体查询min-device-width而不是min-width检查设备宽度而不是浏览器宽度。然后，在调整浏览器窗口大小时图像不会更改：

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

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

HTML5 < picture >元素

HTML5引入了<picture>元素，可以让您定义多个图像。

浏览器支持

该<picture>元素的工作方式与<video>和 <audio>元素类似。您设置了不同的源，第一个符合首选项的源是正在使用的源：

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

该srcset属性是必需的，并定义图像的来源。

该media属性是可选的，并接受您在CSS @media规则中找到的媒体查询。

您还应该<img>为不支持该<picture>元素的浏览器定义元素。

响应式网页设计 - 视频

使用width属性

如果该width属性设置为100％，则视频播放器将响应并按比例放大和缩小：

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

使用max-width属性

如果max-width属性设置为100％，则视频播放器必须缩小（如果必须），但从不缩放到大于其原始大小：

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

响应式网页设计 - 框架

现有许多CSS框架都提供响应式设计。它们是免费的，易于使用。

使用W3.CSS

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

框架是Bootstrap

另一个流行的框架是Bootstrap，它使用HTML，CSS和jQuery来制作响应式网页。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>