Fork me on GitHub

响应式设计

发表于 | 阅读次数:
字数统计: 2,012

响应式设计总结（忘记IE9以下吧）

1.基本用法

1
2
3
4
5
6
7
8
9
/* 在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

1
2
3
4
5
6
7
8
// 视口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.交互媒体特性

1
2
3
4
5
6
7
指针特性有三个值：none、coarse和fine。

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

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

3.环境媒体特性

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

4.flexbox弹性布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 利用弹性布局实现浮动效果
<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.响应式图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 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新增语义标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// <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.响应式视频的解决方案

1
2
3
4
[网址](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.多列布局

1
2
3
4
5
6
7
8
9
10
11
<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.截短文本

1
2
3
4
5
6
.truncate {
    width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: no-wrap;
}

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

1
2
3
4
5
6
7
8
9
10
.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.表单样式

1
2
3
为占位符文本添加样式
你可以使用:placeholder-shown伪类选择器来为placeholder属性添加样式。要知道这 个选择器经过多次迭代，所以你要确保你拥有前添加工具来兼容各种版本。
input:placeholder-shown { color: #333; }
Mr XuJiang wechat
欢迎您扫一扫上面的微信二维码，小猪送你啦！
0%