一、什么是响应式设计

维基百科是这样对响应式作的描述:“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. 爬虫(GET)——传递要查询的关键字

    工具:python3 目标:传递关键字,爬取任意关键字的页面 import urllib.request # 定义User-Agent,要爬取的url,以及要查询的关键字 headers = {&qu ...

  2. webstorm中.vue报错(es6语法报错)-转

    1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript把 Javascript L ...

  3. B-树 B+树 红黑树

    B树是一种多路平衡查找树,它的每一个节点最多包含k个孩子,k被称为B树的阶.k的大小取决于磁盘页的大小.B树主要应用于文件系统以及部分数据库索引,比如著名的非关系型数据库MongoDB.一个m阶的B树 ...

  4. Android Studio CMake 生成多个so

    生成多个so案例 这里stringFromJNI和stringFromJNI11分别是调用one-lib和two-lib两个so package com.test.ndkmoreso; import ...

  5. LeetCode 110.平衡二叉树(C++)

    给定一个二叉树,判断它是否是高度平衡的二叉树. 本题中,一棵高度平衡二叉树定义为: 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过1. 示例 1: 给定二叉树 [3,9,20,null,nu ...

  6. 《Flink 源码解析》—— 源码编译运行

    更新一篇知识星球里面的源码分析文章,去年写的,周末自己录了个视频,大家看下效果好吗?如果好的话,后面补录发在知识星球里面的其他源码解析文章. 前言 之前自己本地 clone 了 Flink 的源码,编 ...

  7. nginx+keepalived主辅切换(监控脚本在keepalived.conf中执行)

    以前写过一篇,nginx+keepalived 双机互备的文章,写那篇文章的时候没有想过如果apache或者nginx 挂了,而 keepalived 或者 机器没有死,那么主辅是不会切换的,今天就研 ...

  8. 【转】Android Canvas绘图详解

    转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android中使用图形处理引擎,2D部分是an ...

  9. winfrom C#树勾选等

    AfterCheck /// <summary> /// 树勾选 /// </summary> /// <param name="sender"> ...

  10. 错误处理(Operation Result)方法

    自己开发的公众号,可以领取淘宝内部优惠券 问题 现在有一个FileStorageService类,继承自IStorageService,具体实现如下 public interface IStorage ...