如何优雅的做响应式设计

752
原文链接: build800.com

响应式设计总结(忘记IE9以下吧)

1.基本用法

/* 在css中使用 */
@media screen and (min-width: 320px) {
    body {
         background-color: green;
    }
}
/* 在link中使用 */
<link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait-screen.css" />
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px)" href="800wide-portrait-screen.css" />

注意事项:在针对所有设备的媒体查询中,可以使用简写语法,即省略关键字all(以及紧 随其后的and)。换句话说,如果不指定关键字,则关键字就是all

// 视口meta标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

// CSS媒体查询4级致力于为这个做法在CSS中提供更标准的实现方式:
@media (scripting: none) { /* 没有JavaScript时的样式 */ }

可以使用JavaScript时:
@media (scripting: enabled) {     /* 有JavaScript时的样式 */ }

2.交互媒体特性

指针特性有三个值:none、coarse和fine。

coarse指针设备代表触摸屏设备中的手指。不过,这个值也可以是游戏机中的指针等不像 鼠标那样能够提供精确控制的机制。
@media (pointer: coarse) {      /* 针对coarse指针的样式 */ }

fine指针设备可能是鼠标,也可能是手写笔或其他未来可能出现的精确指针设备:
@media (pointer: fine) {     /* 针对精确指针的样式 */ }

3.环境媒体特性

要是能根据用户的环境来改变设计多好啊!比如,根据环境光线的亮度。这样,如果用户身 处光线很暗的房间,我们可以相应减小所用颜色的亮度值。或者相反,在光线充足的环境里,提 高亮度。环境媒体属性就是为解决这个问题而生的。看下面的例子:
@media (light-level: normal) {      /* 针对标准亮度的样式 */ }
@media (light-level: dim) {     /* 针对暗光线条件的样式 */ }
@media (light-level: washed) {     /* 针对强光线条件的样式 */ }
4级媒体查询尚未得到广泛支持,而且规范本身还有可能变动。不过,了解未来几年可能有 什么新特性可以使用还是有必要的。

4.flexbox弹性布局

// 利用弹性布局实现浮动效果
<div class="MenuWrap">
    <div class="item"></div>
</div>
// css
.MenuWrap{
    display: flex;
    width: 400px;
}
// 此时item会位于父元素右边侧
.item{
     margin-left: auto;
}

// 改变原始次序
自从有了CSS以来,就只有一种方法可以改变网页中HTML元素的视觉次序。那就是把元素 包在一个设置为display: table的容器内,然后切换内部元素的display属性。想放到前头的, 就切换成display: table-caption;想放在底部的,就切换成display: table-footer- group;或者想放在第二位的(位于display: table-caption之后),就切换成display: table-header-group。

// 不过,Flexbox却内置了重新排序的能
// -1表示要位于其 他所有元素之前
.FlexContent { order: -1; }

5.响应式图片

// srcset 及 sizes 联合切换 (IE基本不支持)
// secret的第二个参数是图片的尺寸,450w表示大致等于450px;
// sizes用来根据设备屏幕尺寸来选择加载最匹配设备宽度的图片
<img srcset="scones-small.jpg 450w, scones-medium.jpg 900w" sizes="(min-width: 17em) 100vw, (min-width: 40em) 50vw" src="sconessmall. jpg" alt="Scones">

// picture 元素
// 可以根据不同的分辨率加载不同的图片
<picture>
   <source media="(min-width: 30em)" srcset="cake-table.jpg">
   <source media="(min-width: 60em)" srcset="cake-shop.jpg">
   <img src="scones.jpg" alt="One way or another, you WILL get cake.">
</picture>

// 使用新图片格式
<picture>
    <source type="image/webp" srcset="scones-baby-yeah.webp">
    <img src="scones-baby-yeah.jpg" alt="Again, you WILL eat cake.">
</picture>

6.HTML5新增语义标签

// <main>
主内容区,一个html文档只能出现一次,,而且不能作 为article、aside、header、footer、nav或header等其他HTML5语义元素的后代

// <section>
section元素用于定义文档或应用中一个通用的区块。关键是要知道这个元素不是为应用样式而存在的。
在开发Web应用时,我一般会用section包装可见组件。这样可以清楚地知道一个组件的开始和结束。
那到底什么时候该用section元素呢?可以想一想其中的内容是否会配有自然标题(如h1)。 如果没有,那好还是选div

// <nav>
nav元素用于包装指向其他页面或同一页面中不同部分的主导航链接。但它不一定非要用 在页脚中(虽然用在页脚中是可以的);页脚中经常会包含页面共用的导航。
如果你通常使用无序列表(ul)和列表标签(li)来写导航,那好改成用nav嵌套多个a标签。

// <article>
article用于包含一个独立的内容块。在划分页面结构时,问一问自己,想放在article中的内容如果整体复制粘贴到另一个站点中是否照样有意义?或者这样想,想放在article中的内容是不是包含了RSS源中的一篇文章?明显可以放到article元素中的内容有博客正文和新闻报道。对于嵌套article而言,内部的article应该与外部article相关。

// <aside>
aside元素用于包含与其旁边内容不相关的内容。这个元素也适合包装突出引用、广告和导航元素。基本上任何与主内容无直接关系的,都可以放在这里边。

// <figure>和<figcaption>
// 如果图片或代码需要一个小标题,那么这个元素非常合适
<figure class="MoneyShot">
    <img class="MoneyShotImg" src="img/scones.jpg" alt="Incredible scones" />   <figcaption class="ImageCaption">Incredible scones, picture from Wikipedia
    </figcaption>
</figure>

// <header>
实践中,可以将header元素用在站点页头作为“报头”,或者在article元素中用作某个区块的引介区。它可以在一个页面中出现多次(比如页面中每个sectioin中都可以有一个header)。

// <footer>
footer元素应该用于在相应区块中包含与区块相关的内容,可以包含指向其他文档的链 接,或者版权声明。footer同样可以在页面中出现多次。比如,可以用它 作为博客的页脚,同时用它包含文章正文的末尾部分。不过,规范里说了,作者的联系信息应该 放在address元素中。

5.响应式视频的解决方案

[网址](http://embedresponsively.com/)

// 结果案例
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embedcontainer iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</ style><div class='embed-container'><iframe src='http://www.youtube. com/embed/B1_N28DA3gY' frameborder='0' allowfullscreen></iframe></div>

6.css3新特性

1.多列布局

<main>
    <p>lloremipsimLoremipsum dolor sit amet, consectetur <!-- 省略很多文本 --> </p>  <p>lloremipsimLoremipsum dolor sit amet, consectetur <!-- 省略很多文本 --></p>
</main>

// css
main {
    column-width: 12em; //设置列宽
    column-count: 4; //列数固定,宽度可变
    column-gap: 2em; // 添加列间距
    column-rule: thin dotted #999; //添加分割线
}

2.截短文本

.truncate {
    width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: no-wrap;
}

3.隐藏滚动条及溢出时可滚动

.Scroll_Wrapper {
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;   /* 在WebKiet的触摸设备上出现 */   -webkit-overflow-scrolling: touch;   /* 在支持的IE中删除滚动条 */   -ms-overflow-style: none;
}
/* 防止WebKit浏览器中出现滚动条 */
 .Scroll_Wrapper::-webkit-scrollbar {
    display: none;
}

7.表单样式

为占位符文本添加样式
你可以使用:placeholder-shown伪类选择器来为placeholder属性添加样式。要知道这 个选择器经过多次迭代,所以你要确保你拥有前添加工具来兼容各种版本。
input:placeholder-shown { color: #333; }