一、什么是响应式设计

维基百科是这样对响应式作的描述:“Responsive设计简单的称为RWD,是精心提供各种设备都能浏览网页的一种设计方法,RWD能让你的网页在不同的设备中展现不同的设计风格。”

响应式布局设计要考虑到元素布局的秩序,需要满足三个条件:

  • 网站必须建立在灵活的流体网格基础上

流体网格,这种网格设计将每个格子使用百分比单位来控制网格大小,这样做让网格大小随时根据屏幕尺寸大小做出相对应的比例缩放

  • 引用到网站的图片必须是可伸缩的

弹性图片指的是 不给图片设置固定尺寸,而是根据流体网格进行缩放,用于适应各种网格的尺寸。

img {max-width:100%;}
  • 不同的显示风格,需要在Media Querues上写不同的样式

根据用户的使用设备的当前宽度,你的Web页面将加载一个备用的样式,实现特定的页面风格。

Responsive设计 (响应式设计)的更多相关文章

  1. 企业级的响应式设计(Responsive design at enterprise level)译

    导言 响应式设计是现在人们谈论的热点,但如何部署,特别是在有多种设备的大型项目中如何组织响应式设计,响应式设计和可伸缩性(Scalable)有什么区别?这都是需要解决的难题. 优化用户经验——Opti ...

  2. Responsive Design响应式网站设计心得笔记

    这个词已经喊了很久了,一直都是小打小闹,没正经的做过大的响应式全站,这次终于有机会了.网站刚上线半个月,就要改版为响应式设计,支持手机/PC等各类终端显示浏览.今天把首页做好,并测试无误,这里把一些应 ...

  3. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

  4. HTML5、CSS3响应式设计——笔记

    1.1.响应式网页设计 响应式网页设计(RWD,Responsive Web Design)这个术语,由伊桑·马科特(EthanMarcotte)提出.他在A List Apart 发表了一篇开创性的 ...

  5. paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  6. web设计经验<一> 提升移动设备响应式设计的8个建议

    今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体 ...

  7. 超棒的响应式设计测试书签和工具(bookmarks)(转)

    一.测试书签(bookmarks) Viewport Resizer 这个书签号称拥有158个国家3万多活跃的用户,主要特性: 完全自定制 方便的添加自定义尺寸 手动的横竖屏切换 自动的横竖屏切换 ( ...

  8. CSS3知识点整理(五)----响应式设计及其他属性

    介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...

  9. 一款由css3和jquery实现的响应式设计导航

    2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览    ...

随机推荐

  1. mysql查看sql语句的设置

    SHOW VARIABLES LIKE "general_log%"; SET GLOBAL general_log_file = 'D:\\mysql.log'; SET GLO ...

  2. ckeditor(在线文本编辑器)使用教程

    ckeditor是一款由javascript编写的富文本网页编辑器,它可以填写文字.插入图片.视频.Excel等富媒体信息,也可以在源码方式下填写内容,在各个网站中应用非常广泛. 下面就来说说cked ...

  3. cookie使用举例(添加购物车商品_移除购物车商品)

    之前介绍过cookie和session的原理和区别.下面举例说明一下cookie在实际项目中的使用.使用cookie实现购物车功能: 1.往购物车添加商品 2.从购物车里移除商品 主要是要点是:以产品 ...

  4. join合并字符串时使用生成器表达式

    data=['11','pp','aa'] ','.join(str(d) for d in data)

  5. Unity Transform

    public class PlayerControll : MonoBehaviour { Transform playerTransform; Animation playerAnimation; ...

  6. pat1091. Acute Stroke (30)

    1091. Acute Stroke (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue One impo ...

  7. web前端兼容性整理+完善

    [技巧类] 1.对一些标签统一规范. 2.padding,marign,height,width 写好标准头 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1 ...

  8. windows常用命令行总结

    cmd下的命令行 1.查看当前目录下的子目录 dir   或 dir /b 类似Linux 下的  ls 或者 ls -l 2.盘符切换  d: 3.进入目录 cd [目录名] 退一个目录 cd .. ...

  9. SQL Server和ASP.NET的操作基本操作

    ado.net提供了丰富的数据库操作,这些操作可以分为三个步骤: 第一,使用SqlConnection对象连接数据库: 第二,建立SqlCommand对象,负责SQL语句的执行和存储过程的调用: 第三 ...

  10. Hibernate课程 初探多对多映射2-2 创建持久化类和映射文件

    生成实体类 和 cfg.xml配置 cfg.xml 参照一对多映射 实体类如下: Project 类 package com.ddwei.entity; import java.util.HashSe ...