响应式 Web 设计 - Viewport
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>