“HTML响应式网页设计”的版本间差异
本页内容
(创建页面,内容为“37 == 什么是响应式网页设计? == 响应式网页设计是创建在所有设备上看起来都不错的网页!响应式网页设计将自动调整不同的屏幕尺寸和viewport。响应式网页设计是关于使用 HTML 和 CSS 自动调整、隐藏、缩小或放大网站的大小,使其在所有设备(台式机、平板电脑和手机)上看起来都很好。简单的说响应式布局就是一个网站能够兼容…”) |
|||
第22行: | 第22行: | ||
你应该避免使用minimum-scale、maximum-scale,尤其是将user-scalable设为no。用户应该有权力尽可能大或小地进行缩放,阻止这种做法会引起访问性问题。 | 你应该避免使用minimum-scale、maximum-scale,尤其是将user-scalable设为no。用户应该有权力尽可能大或小地进行缩放,阻止这种做法会引起访问性问题。 | ||
== 使用 @media == | |||
@media可以针对不同屏幕尺寸设置不同的样式 | |||
<sample title="" desc="" run="r1"> | <sample title="" desc="" run="r1"> | ||
@media only screen and (max-width:800px) { | @media only screen and (max-width:800px) { | ||
/* | /* 平板: */ | ||
.main { | .main { | ||
width: 80%; | width: 80%; | ||
第35行: | 第38行: | ||
} | } | ||
@media only screen and (max-width:500px) { | @media only screen and (max-width:500px) { | ||
/* | /* 手机 */ | ||
.menu, .main, .right { | .menu, .main, .right { | ||
width: 100%; | width: 100%; | ||
第128行: | 第131行: | ||
</body> | </body> | ||
</html> | </html> | ||
</run> | |||
== 响应式图像 == | |||
响应式图像是可以很好地缩放以适应任何浏览器大小的图像。 | |||
=== 使用宽度属性 === | |||
如果 CSS''' <nowiki>width</nowiki> '''属性设置为 100%,图像将响应并放大和缩小: | |||
<sample title="" hererun="s" desc="" > | |||
</ | <img | ||
src="/favicon.ico" style="width:100%;"> | |||
</示例> | |||
请注意,在上面的示例中,图像可以放大到大于其原始大小。在许多情况下,更好的解决方案是使用该''' <nowiki>max-width</nowiki> '''属性。 | |||
=== 使用最大宽度属性 === | |||
如果该''' <nowiki>max-width</nowiki> '''属性设置为 100%,则图像将在必要时缩小,但永远不会放大到大于其原始大小: | |||
<sample title="" hererun="s" desc="" > | |||
<img | |||
src="/favicon.ico" style="max-width:100%;height:auto;"> | |||
</示例> |
2022年8月13日 (六) 22:51的版本
什么是响应式网页设计?
响应式网页设计是创建在所有设备上看起来都不错的网页!响应式网页设计将自动调整不同的屏幕尺寸和viewport。响应式网页设计是关于使用 HTML 和 CSS 自动调整、隐藏、缩小或放大网站的大小,使其在所有设备(台式机、平板电脑和手机)上看起来都很好。简单的说响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。
设置viewport
要创建响应式网站,请将以下 <meta> 标签添加到您的所有网页:
示例
<meta name="viewport" content="width=device-width,initial-scale=1">
这个元标签告诉移动端浏览器,它们应该将视口宽度设定为设备的宽度,将文档放大到其预期大小的 100%,在移动端以你所希望的为移动优化的大小展示文档。
- initial-scale:设定了页面的初始缩放,我们设定为 1。
- height:特别为视口设定一个高度。
- minimum-scale:设定最小缩放级别。
- maximum-scale:设定最大缩放级别。
- user-scalable:如果设为no的话阻止缩放。
你应该避免使用minimum-scale、maximum-scale,尤其是将user-scalable设为no。用户应该有权力尽可能大或小地进行缩放,阻止这种做法会引起访问性问题。
使用 @media
@media可以针对不同屏幕尺寸设置不同的样式
示例
@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%;
}
}
响应式图像
响应式图像是可以很好地缩放以适应任何浏览器大小的图像。
使用宽度属性
如果 CSS width 属性设置为 100%,图像将响应并放大和缩小:
<sample title="" hererun="s" desc="" >
<img
src="/favicon.ico" style="width:100%;">
</示例> 请注意,在上面的示例中,图像可以放大到大于其原始大小。在许多情况下,更好的解决方案是使用该 max-width 属性。
使用最大宽度属性
如果该 max-width 属性设置为 100%,则图像将在必要时缩小,但永远不会放大到大于其原始大小:
<sample title="" hererun="s" desc="" >
<img
src="/favicon.ico" style="max-width:100%;height:auto;">
</示例>