响应式布局（响应式图片）

Posted on

缩放布局：元素缩放
流式布局：百分比+min-width，容器缩放
弹性布局：rem em
响应式设计：媒体和媒体查询、弹性网格布局（流式布局）、弹性图片
关注点：浏览器（web端五种；移动端主要是内置、可下载、代理、WebView）视口（浏览器窗口）

meta标签

content为必须属性（定义与name或http-equiv相关的元信息），可选属性有name（添加关键词，利于SEO）、http-equiv（发送到服务器请求头包含的内容比如expires、charset等）、scheme。
如

1
<meta http-equiv="refresh" content="2;url=http://www.baidu.com">

意味着2秒后页面重定向到百度。name和http-equiv均配合content进行使用。
常用标签：
charset=”utf-8”
name=”keywords” content=”your keywords”
name=”description” content=””
name=”author” content=””
name=”robots” content=”index,follow”//搜索引擎抓取方式
name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=yes”//移动端布局(高宽度、初始缩放比例、最大/最小缩放比例、是否允许用户缩放)
name=”apple-moblile-web-app-capable” content=”yes”//删除苹果默认工具栏菜单栏
http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1” 优先使用最新的IE和chrome

媒介查询media queries（自适应布局）

写于style中，针对不同屏幕尺寸使用不同的css格式。（含浏览器缩放）

1
2
3
4
5
@media screen and (min-width:300px) { //横竖屏切花也是使用media screen
    body{
        background-color:red;//当屏幕宽度小于300px时背景变红。
    }
}  //设置多种视图宽度，比如在200px-500px之间的格式...

图片自适应：max-width设置为100%

弹性布局

包裹文字的部分使用rem em，划分区域仍使用百分比或px。
布局不变，只会缩放。

流式布局

百分比。布局不变，屏幕尺度跨度过大时无法正常显示。

响应式布局

综合上述方法。

###响应式图片
1、resize事件判断屏幕
2、srcset：

1
2
3
4
5
6
7
<img srcset="1-320w.jpg 320w,
             2-480w.jpg 480w,
             3-800w.jpg 800w"
     sizes="(max-width:320px) 280px,
            (max-width:480px) 440px,
            800px"
     src="3-800w.jpg" alt="xx">

详解：
srcset:多张图+图片的固有宽度（注意单位w）
sizes:屏幕最大宽度320px时，选择最接近280px（图像填充的槽宽度）的图片，默认是800px
提供src图片用于无法识别srcset的浏览器，保证兼容性
另：按需请求相应图片，能少就少，极大减少了带宽
另：分辨率切换，不需要设置sizes，只需把320w等换成描述分辨率的即可。
3、picture标签：里面包含source和img标签，source提供多样的img资源，比如设置srcset和media设置不同屏幕的显示图片
1
2
3
4
5
<picture>
  <source media="(max-width: 600px)" srcset="111.jpg">
  <source media="(min-width: 800px)" srcset="11.jpg">
  <img src="11.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

选择这个还是上一种方法因人而异，通常web开发者习惯选择picture，而浏览器开发者大概会选择上一种。
4、svg