HTML 响应式Hello World

什么是响应式网页设计？

响应式Web设计是关于使用HTML和CSS自动调整大小，隐藏，缩小或放大网站，使其在所有设备(台式机，平板电脑和手机)上看起来都很好：

注意:响应式网站几乎可以适应所有的显示终端

制作响应式网页时，请在 meta>标签中添加以下元素：

HTML 文本格式化 meta name= viewport content= width=device-width, initial-scale=1.0 >

亲自试一试

这将设置页面的视口，这将为浏览器提供有关如何控制页面尺寸和缩放的说明。

这里是一个网页的一个例子，一个设置mate标签，

没有视口元标签

使用视口元标签

提示:如果您使用手机或平板电脑浏览此页面，可以点击上面的两个链接查看差异。

响应式图像

响应式图像是可以很好地缩放以适合任何浏览器大小的图像。

使用width属性

如果CSS width 属性设置为100％，则图像将响应并向上和向下扩展：

img src= img_girl.jpg >

亲自试一试

请注意，在上面的示例中，图像可以放大到大于其原始大小。在许多情况下，更好的解决方案是使用该 max-width属性。

使用max-width属性

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

img src= img_girl.jpg >

亲自试一试

根据浏览器宽度显示不同的图像

HTML picture> 元素允许您为不同的浏览器窗口大小定义不同的图像。

调整浏览器窗口的大小，以查看下面的图像如何根据宽度更改：

source srcset= img_smallflower.jpg media= (max-width: 600px) >
source srcset= img_flowers.jpg media= (max-width: 1500px) >
source srcset= flowers.jpg >
img src= img_smallflower.jpg alt= Flowers >
/picture>

亲自试一试

可以使用 vw 单位设置文本大小，这意味着 viewport width .

这样文本大小将遵循浏览器窗口的大小：

Hello World

调整浏览器窗口的大小以查看文本大小的缩放方式。

亲自试一试

Viewport是浏览器窗口大小。1vw =视口宽度的1％。如果视口宽50厘米，则1vw为0.5厘米。

除了调整文本和图像的大小之外，在响应式网页中使用媒体查询也很常见。

使用媒体查询，您可以为不同的浏览器大小定义完全不同的样式

示例：调整浏览器窗口的大小，以查看下面的三个div元素将在大屏幕上水平显示并在小屏幕上垂直堆叠：

style> 

.left, .right { 

 float: left; 

 width: 20%; /* 默认情况下，宽度是20% */ 

.main { 

 float: left; 

 width: 60%; /* 默认情况下，宽度是60% */ 

/* 使用媒体查询在800px添加断点: */ 

@media screen and (max-width: 800px) { 

 .left, .main, .right { 

 width: 100%; /* 当viewport小于800px时，宽度为100% */ 

/style>

亲自试一试

提示: 要了解有关媒体查询和响应式Web设计的更多信息，请阅读我们的 RWD 教程。

响应式网页 完整示例

响应式网页应该在大型桌面屏幕和小型手机上看起来不错。

亲自试一试

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/59260.html

aliyunlinuxphp平板电脑手机