响应式 Web 设计 - Viewport-优快云博客

本文介绍了响应式网页设计的关键技术，包括如何通过CSS控制用户缩放、使用box-sizing属性优化布局、利用@media查询适配不同屏幕尺寸、设置图片的最大宽度以保持比例不变，以及采用HTML5的<picture>元素提供多种图片选项。

1.user-scalable：用户是否可以手动缩放。

2.box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。指定宽度和高度的框，并把边框和内边距放入框中。

3.@media 可以针对不同的屏幕尺寸设置不同的样式

4.如果文档宽度小于 300 像素则修改背景演示(background-color):

@media screen and (max-width: 300px) {
    body {
         margin: 0px; padding: 0px; color: rgb(170, 17, 17);">lightblue;
    }
}

5.img,width 属性设置为 100%，图片会根据上下范围实现响应式功能,图片会比它的原始图片大。我们可以使用 max-width 属性很好的解决这个问题　　

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

6.HTML5 的 <picture> 元素可以设置多张图片。

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

转载于:https://www.cnblogs.com/LWJ-booke/p/7373108.html