宗旨:始终为移动优先设计
响应式网页设计 - 简介
什么是响应式网页设计?
响应式网页设计使您的网页在所有设备上都很好看。
响应式网页设计仅使用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>
响应式网页设计 - 模板
W3.css网站模板
我们使用W3.CSS框架创建了一些响应式模板。
您可以在所有项目中自由修改,保存,共享和使用它们。
https://www.w3schools.com/css/css_rwd_templates.asp