Responsive 设计
-
Upload
larissa-ayers -
Category
Documents
-
view
113 -
download
16
description
Transcript of 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: [email protected]