responsive 设计

Responsive 设计

作者 : 大漠QQ: 81059347

Blog: http://www.w3cplus.com

新浪微薄：http://weibo.com/w3cplus

Responsive 设计

Responsive 是什么？

Responsive 设计

Responsive 是流体布局Responsive 是网格布局Responsive 是手机布局

Responsive 设计

Responsive 是流体布局Responsive 是网格布局Responsive 是手机布局

Responsive 设计

Responsive 是灵活的布局

适合各种设备的布局

Responsive 设计

http://www.w3cplus.com/css3/media-queries-alistparthttp://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

Responsive 设计

http://www.w3cplus.com/css3/media-queries-hicksdesignhttp://hicksdesign.co.uk/

Responsive 设计

http://www.w3cplus.com/css3/media-queries-tee-galleryhttp://teegallery.com

Responsive 设计

如何做？

Responsive 设计

简单的布局

Responsive 设计

CSS3 Media Queries

http://www.w3cplus.com/content/css3-media-queries

Responsive 设计

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

/* Styles */}

http://www.w3cplus.com/css3/css3-media-queries-for-different-devices

Smartphones (portrait and landscape)

Responsive 设计

@media only screen and (min-width : 321px) {

/* Styles */}

http://www.w3cplus.com/css3/css3-media-queries-for-different-devices

Smartphones (landscape)

Responsive 设计

@media only screen and (max-width : 320px) {

/* Styles */}

http://www.w3cplus.com/css3/css3-media-queries-for-different-devices

Smartphones (portrait)

Responsive 设计

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

/* Styles */}

http://www.w3cplus.com/css3/css3-media-queries-for-different-devices

iPads (portrait and landscape)

Responsive 设计

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

/* Styles */}

http://www.w3cplus.com/css3/css3-media-queries-for-different-devices

iPads (landscape)

Responsive 设计

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

/* Styles */}

http://www.w3cplus.com/css3/css3-media-queries-for-different-devices

iPads (portrait)

Responsive 设计

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {

/* Styles */}

http://www.w3cplus.com/css3/css3-media-queries-for-different-devices

iPhone 4

Responsive 设计

@media screen and (max-width : 640px) {

/* CSS Styles */}

http://www.w3cplus.com/css3/css3-media-queries-for-different-devices

640px 显屏

Responsive 设计

@media screen and (max-width : 800px) {

/* CSS Styles */}

http://www.w3cplus.com/css3/css3-media-queries-for-different-devices

800px 显屏

Responsive 设计

@media screen and (max-width : 1024px) {

/* CSS Styles */}

http://www.w3cplus.com/css3/css3-media-queries-for-different-devices

1024 显屏

Responsive 设计

@media only screen and (min-width : 1224px) {

/* Styles */}

http://www.w3cplus.com/css3/css3-media-queries-for-different-devices

Desktops and laptops

Responsive 设计

@media only screen and (min-width : 1824px) {

/* Styles */}

http://www.w3cplus.com/css3/css3-media-queries-for-different-devices

Large screens

Responsive 设计

Responsive 设计

Responsive 设计

Min-* && Max-*

Responsive 设计

断点的选择

Responsive 设计

Responsive 设计

Responsive 设计

流体布局

Responsive 设计

我们怎么布局？

Responsive 设计

给一个流体容器

Responsive 设计

添加反方向浮动

Responsive 设计

三列布局2列嵌套法

Responsive 设计

相对值

Responsive 设计

确定嵌套宽度你想要的

宽度父元素的

宽度

=嵌套列的

宽度

Responsive 设计

计算嵌套宽度 你想要的宽度

父元素的宽度

= 嵌套列的宽度

目标内容 = 结果

Responsive 设计

计算嵌套宽度 你想要的宽度

父元素的宽度

= 嵌套列的宽度

目标内容 = 结果

20

80= 0.25

25%

Responsive 设计

是你想要的？

Responsive 设计

间距是？

Responsive 设计

容器撑破了怎么办？*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

Responsive 设计

图片怎么自适应？

img { max-width: 100%;}

Responsive 设计

图片怎么自适应？<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

@media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); }}

@media (min-device-width:800px) { img[data-src-800px] { content: attr(data-src-800px, url); }}

Responsive 设计

移动端上的效果

Responsive 设计

Viewport

Responsive 设计

Viewport

< meta name="viewport" content="width=device-width">

Responsive 设计

Q && A

网名：大漠， W3cplus 创始人，现居上海，从事Web 前端和手游工作，对 HTML5 、 CSS3 、移动端、前端框架抱有浓厚兴趣。现正在编写《 css3精解： CSS3 核心技术与 Bootstrap 使用详解》一书。Blog: http://www.w3cplus.com

QQ: 81059347

QQ 交流群： 1041263

新浪微薄 : http://weibo.com/w3cplus

E-mail: w3cplus@hotmail.com