一、什么是响应式设计

维基百科是这样对响应式作的描述:“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. vue 之 nextTick 与$nextTick

    VUE中Vue.nextTick()和this.$nextTick()怎么使用? 官方文档是这样解释的: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 D ...

  2. php数组·的方法-数组排序

    /* * * 数组排序函数*/ //asort() 数组元素值升序排序 //arsort() 降序 $arr7=array(1,23,65,34,3,2,3,34,453,54,456,65,5); ...

  3. django django中的HTML控件及参数传递方法 以及 HTML form 里的数据是怎么被包成http request 的?如何在浏览器里查看到这些数据?

    https://www.jb51.net/article/136738.htm django中的HTML控件及参数传递方法 下面小编就为大家分享一篇django中的HTML控件及参数传递方法,具有很好 ...

  4. Android Studio 2.2以上支持了Cmake的配置JNI的相关参数

    Android Studio 2.2以上支持了Cmake的配置JNI的相关参数,简化了通过Android.mk配置.并很好的继承了C++的编辑方式.以下是对应的引入第三方so和第三方.cpp文件的路径 ...

  5. jquery dataTable 自定义 Button及按钮事件

    参考网址:http://stackoverflow.com/questions/18134913/jquery-datatabletabletool-custom-buttons-calling-ev ...

  6. (转)Memcached用法--参数和命令详解

    Memcached用法--参数和命令详解 1. memcached 参数说明: # memcached -h 1.1 memcached 的参数 常用参数 -p <num> 监听的TCP端 ...

  7. Java实现中文词频统计

    昨日有个中文词频统计的需求, 百度一番后, 发现一大堆标题党文章, 讲的与内容严重不符, 这里就简单记录下自己实现的流程吧! 与英文单词的词频统计不同, 中文的难点在于如何分词, 不过好在有许多优秀的 ...

  8. 实现Nginx中使用PHP-FPM时记录PHP错误日志的配置方法

    最近在本地搭建的LNMP的开发环境.为了开发的时候不影响前端的正常开发就屏蔽的PHP里面php.ini中的一些错误提示.但是这样一来,就影响到了后端开发的一些问题比如不能及时调试开发中的一些问题 ng ...

  9. 通过一个例子,总结下检测数组属性的N种方法

    判断arr数组里是否含有a,有a返回1;没有返回2var arr = [{a:1,b:2,c:3},{q:1,w:2,e:3},{s:4,g:5,i:9},{b:2,v:3,u:4}]; 检测属性的3 ...

  10. 使用Advanced Installer进行二次打包

    使用Advanced Installer进行二次打包 在上一篇使用InstallerShield打包VS程序中,我已经叙述过,为什么要进行二次打包的问题,在此我就不再赘述.本次长枪直入,说一说如何使用 ...