码迷,mamicode.com
首页 > Web开发 > 详细

响应式 Web 设计 - Viewport

时间:2017-08-16 15:27:33      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:htm   flow   example   解决   宽度   背景   blog   方式   不同   

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>

  

  

响应式 Web 设计 - Viewport

标签:htm   flow   example   解决   宽度   背景   blog   方式   不同   

原文地址:http://www.cnblogs.com/LWJ-booke/p/7373108.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!