小白教程
所有教程
关于
Search
172.70.130.90
172.70.130.90
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML响应式网页设计”的源代码
本页内容
上一节:
HTML_网页布局
下一节:
HTML代码元素
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
[[Category:HTML教程|37]] == 什么是响应式网页设计? == 响应式网页设计是创建在所有设备上看起来都不错的网页!响应式网页设计将自动调整不同的屏幕尺寸和viewport。响应式网页设计是关于使用 HTML 和 CSS 自动调整、隐藏、缩小或放大网站的大小,使其在所有设备(台式机、平板电脑和手机)上看起来都很好。简单的说响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。 [[文件:网页响应式设计.png]] == 设置viewport == 要创建响应式网站,请将以下''' <nowiki><meta></nowiki> ''' 标签添加到您的所有网页: <sample title="" desc=""> <meta name="viewport" content="width=device-width,initial-scale=1"> </sample> 这个元标签告诉移动端浏览器,它们应该将视口宽度设定为设备的宽度,将文档放大到其预期大小的 100%,在移动端以你所希望的为移动优化的大小展示文档。 * initial-scale:设定了页面的初始缩放,我们设定为 1。 * height:特别为视口设定一个高度。 * minimum-scale:设定最小缩放级别。 * maximum-scale:设定最大缩放级别。 * user-scalable:如果设为no的话阻止缩放。 你应该避免使用minimum-scale、maximum-scale,尤其是将user-scalable设为no。用户应该有权力尽可能大或小地进行缩放,阻止这种做法会引起访问性问题。 == 使用 @media == @media可以针对不同屏幕尺寸设置不同的样式, 下面的例子 使用 max-width 定义输出设备中的页面最大可见区域宽度。 <sample title="" desc="" run="r1"> @media only screen and (max-width:800px) { /* 平板: */ .main { width: 80%; padding: 0; } .right { width: 100%; } } @media only screen and (max-width:500px) { /* 手机 */ .menu, .main, .right { width: 100%; } } </sample> <run name="r1"> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } .menu { float: left; width: 20%; } .menuitem { padding: 8px; margin-top: 7px; border-bottom: 1px solid #f1f1f1; } .main { float: left; width: 60%; padding: 0 20px; overflow: hidden; } .right { background-color: lightblue; float: left; width: 20%; padding: 10px 15px; margin-top: 7px; } @media only screen and (max-width:800px) { /* For tablets: */ .main { width: 80%; padding: 0; } .right { width: 100%; } } @media only screen and (max-width:500px) { /* For mobile phones: */ .menu, .main, .right { width: 100%; } } </style> </head> <body style="font-family:Verdana;"> <div style="background-color:#f1f1f1;padding:15px;"> <h1>Cinque Terre</h1> <h3>Resize the browser window</h3> </div> <div style="overflow:auto"> <div class="menu"> <div class="menuitem">The Walk</div> <div class="menuitem">Transport</div> <div class="menuitem">History</div> <div class="menuitem">Gallery</div> </div> <div class="main"> <h2>The Walk</h2> <p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p> <img src="img_5terre.jpg" style="width:100%"> </div> <div class="right"> <h2>What?</h2> <p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p> <h2>Where?</h2> <p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p> <h2>Price?</h2> <p>The Walk is free!</p> </div> </div> <div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</div> </body> </html> </run> == 响应式图像 == 响应式图像是可以很好地缩放以适应任何浏览器大小的图像。 === 使用宽度属性 === 如果 CSS''' <nowiki>width</nowiki> '''属性设置为 100%,图像将响应并放大和缩小: <sample title="" hererun="s" desc="" > <img src="/favicon.ico" style="width:100%;"> </sample> 请注意,在上面的示例中,图像可以放大到大于其原始大小。在许多情况下,更好的解决方案是使用该''' <nowiki>max-width</nowiki> '''属性。 === 使用最大宽度属性 === 如果该''' <nowiki>max-width</nowiki> '''属性设置为 100%,则图像将在必要时缩小,但永远不会放大到大于其原始大小: <sample title="" hererun="s" desc="" > <img src="/favicon.ico" style="max-width:100%;height:auto;"> </sample> === 使用picture标签 === [[HTML_picture_标签|picture_标签]] 可以通过source属性设置不同尺寸的设备展示的图片。 == 响应式文本大小 == 可以使用“'''vw'''”单位设置文本大小,即“视口宽度” view width。这样,文本大小将跟随浏览器窗口的大小: <html> <h1 style="font-size:5vw">小白教程</h1> </html> 调整浏览器窗口的大小以查看文本大小的缩放方式。 <sample title="" hererun="s" desc="" > <h1 style="font-size:10vw">Hello World</h1> </sample> view width 是浏览器窗口的大小。1vw = 视口宽度的 1%。如果视口为 50 厘米宽,则 1vw 为 0.5 厘米。 == 使用bootstrap来设计响应式网站 == 使用bootstrap利用其提供的组件可以快速的设计出你想要的响应式页面。 <sample title="" desc="" hererun="bootstrap"> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron"> <h1>My First Bootstrap Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <div class="row"> <div class="col-sm-4"> <h3>Column 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> <div class="col-sm-4"> <h3>Column 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> <div class="col-sm-4"> <h3>Column 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> </div> </div> </body> </html> </sample>
返回至“
HTML响应式网页设计
”。
上一节:
HTML_网页布局
下一节:
HTML代码元素