响应式 Web 设计 - Viewport

Posted 2020-10-03 LWJ_jay

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应式 Web 设计 - Viewport相关的知识，希望对你有一定的参考价值。

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

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

[email protected] 可以针对不同的屏幕尺寸设置不同的样式

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>