初识响应式设计

2017-07-29 本文已影响0人倀空

学习响应式.png

响应式设计是一种方法，使网站可以在任何尺寸的屏幕上轻松浏览和使用

起初，我还以为响应式就是采用百分比设置宽高，让页面能适应于各种尺寸的屏幕，而如今才知道，采用百分百只是自适应设计而已，响应式可没这么简单

什么是响应式设计

所谓响应式设计，就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式，
最终的结果既为：每个设备都得到了正确的设计

媒体查询 @media

CSS的@media规则允许我们根据设备的特性而设计不同的CSS样式，
但如果想利用好这个规则，我们还必须先让网页拥有良好的灵活性，
简单的说，就是不再用像素px做为布局单位，改用百分比

内容策略

内容很重要
在创建一个网站之前，应该先从大局着眼。
网站应该实现什么样的目标？用户访问网站时，我们希望他们做什么？
什么是成功的交互？如何满足用户的需求？
仅使用你需要的
不论是网站中的内容还是动画特效，都首先以需求为中心，不要做本可以或根本不需要做的事情
内容平等
每个人都应该能访问到网站中重要/所有的内容，不论他们用的是什么设备
自适应内容
展示的内容不必所有设备都一样，在需求范围内，可以减少的就可以减掉

响应式网站之HTML

创建一个响应式网站，我们要用到HTML和CSS，偶尔也会用一点JavaScript

一般来说，对于响应式站点，应设置视口如下：
<meta name="viewport" content="width=device-width ,initial-scale=1">

name="viewport" 移动设备浏览器的可视区域
width=device-width 宽度设置为移动设备可视区域的物理宽度
initial-scale 告诉浏览器首次加载网页时候，如何缩放
user-scalable=no 关闭用户缩放能力
maxmum-scale=1 设置页面的最大缩放尺寸

响应式网站之CSS

再次回到媒体查询

创建媒体查询@media规则

/*** 当访问设备是有屏幕的设备,且视口宽度不小于800px ***/
@media only screen and (max-width:800px){
    body { background-color: green;  }
}

only 主要是让旧的浏览器忽略掉整个查询
screen 声明该查询应用于什么类型的设备上
对应的还有print（打印机）,braille（盲文）,all（全部）
and screen是第一个表达式， (max-width:800px)是第二个表达式，只有这两个表达式都为真时才生效，因此需要and关键字进行逻辑与判断

到此，响应式设计的初始部分就介绍完毕了，涉及的内容很少，所以还需继续往后学习

响应式图片

一、srcset（分辨率切换）

srcset属性被添加在<img>元素上的。srcset的值是一个用逗号分隔的列表。列表中的每个项包含一张图片的路径和一个‘w’宽度描述符提供多张分辨率的图片。

<img src="clock-demo-thumb-200.png" 
  alt="Clock" 
  srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
  sizes="(min-width: 600px) 200px, 50vw">

sizes属性包含一个逗号分隔的列表，这个逗号分隔列表描述了根据视口而变化的图片尺寸。

二、picture（艺术指导切换）

<picture>元素包含一系列<source>子元素后跟着需要的<img>元素。source元素原理和video元素的子源类似。

<picture>
  <source media="(min-width: 900px)" srcset="cat-vertical.jpg">
  <source media="(min-width: 750px)" srcset="cat-horizontal.jpg">
  ![](cat.jpg)
</picture>

每个源必须有一个 srcset属性，可选属性包括 media，sizes和 type。<source>元素上的 sizes和 srcset的使用和<img>上完全一样

media属性

media属性是指令，而不是建议
media属性的值是媒体查询。
与sizes属性的媒体情况不同，这里的媒体查询是你熟知并喜爱的且功能完整。
当浏览器检查source元素列表时，使用第一个媒体查询匹配的源。如果没有媒体查询匹配，则使用<img>元素。

三、srcset+picture

如果既要基于视口宽度的媒体查询，又要使用具有不同分辨率版本的图像，可以结合使用<picture>元素和srcset属性

<picture>
<source srcset="homepage-person@desktop.png, homepage-person@desktop-2x.png 2x"       
      media="(min-width: 990px)">
<source srcset="homepage-person@tablet.png, homepage-person@tablet-2x.png 2x" 
      media="(min-width: 750px)">
<img srcset="homepage-person@mobile.png, homepage-person@mobile-2x.png 2x" 
   alt="Shopify Merchant, Corrine Anestopoulos">
</picture>