书里谈到尽量不要使用Media Queriy。 但是过多使用media query,会导致CSS变得脆弱和页面难以维护。一些方法可以减少页面使用 media query.

响应式设计:

(1) 使用百分比替换固定的宽度。如果不行,也尽量使用vw, vh, vmin, vmax。

(2) 使用max-width,而不使用width。

(3) 对于一些元素,如img, object, video, iframe, 使用max-width: 100%。

(4) 如果背景图片要完全覆盖容器,可以使用background-size: cover。

(5) 当要在表格的行和列中对图片或其他元素进行布局时,可以使用Flexbox布局或者display: inline-block。

(6) 使用多列文本时,使用column-width替换column-count

总结: 尽量使用流布局和相对大小。

(对flexbox布局, 和css3属性还要多做了解额)

第一章 响应式设计之Media Quer的更多相关文章

  1. 前端响应式设计中@media等的相关运用

    现在做前端响应式网站特别,响应式成为现在前端设计一个热点,它成为热点的最主要的原因就是,移动端设备屏幕的种类多样,那么如何设置响应式屏幕. /*打印样式*/ @mediaprint{color:red ...

  2. Ext JS 6学习文档-第8章-主题和响应式设计

    Ext JS 6学习文档-第8章-主题和响应式设计 主题和响应式设计 本章重点在 ExtJS 应用的主题和响应式设计.主要有以下几点内容: SASS 介绍和入门 主题 响应式设计 SASS 介绍和入门 ...

  3. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  4. 响应式设计的思考:媒体查询(media query)

    Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...

  5. 使用media query 来实现响应式设计

    你的网页在手机上显示效果可以在电脑上一样好看.完成这个任务的奥秘被称为响应式设计,媒体查询(media query)是实现网页响应的关键. 在电脑上一个例子: <div class=" ...

  6. Bootstrap 响应式设计

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

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

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

  8. CSS 响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  9. 响应式设计的5个CSS实用技巧

    正如我在教程响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了.现在我分享在编码时常用的五个CSS技巧并举例说明.这些技巧都是使用简单 ...

随机推荐

  1. sublime text 3 licence code

    Update:2016年3月9日09:14:12 可用 —– BEGIN LICENSE —–Michael BarnesSingle User LicenseEA7E-8213858A353C41 ...

  2. Oracle中decode方法的作用

    DECODE(条件,值1,翻译值1,值2,翻译值2,...值n,翻译值n,缺省值) 该函数含义如下: IF 条件=值1 THEN    RETURN (翻译值1) ELSIF 条件=值2 THEN   ...

  3. 解决xp搜索“文件中的一个字或者词组”失效

    问:我的电脑安装的是Windows XP系统,最近它的文件搜索功能不能用了,打开搜索界面时,输入文件或文件夹名的文本框是灰色的,无法输入.请问该怎么解决? 答:打开注册表编辑器,定位到[HKEY_CU ...

  4. css margin的相关属性,问题及应用

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=48 引言:margin ...

  5. 解决IE6不支持position:fixed属性

    最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性.上网收集了一下解决方案 比较好的方案就是利用css表达式进行解决 补充:CSS Expression (CSS 表达式), ...

  6. 利用css中的border生成三角,兼容包括IE6的主流浏览器

    1.生成四个不同颜色方向的梯形 #ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #3 ...

  7. 解决黑苹果与windows时区不一致

    原理就是将windows识别硬件时间为UTC-0而不是现在的UTC+8 下面都是抄来的 注册表HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\T ...

  8. Android微信SDK API 调用教程【转】

    原文:http://blog.csdn.net/worker90/article/details/8211451 最近一直在调用微信的API,却发现一直调用不成功,纠结了好久,各方面找教程,找官方,官 ...

  9. TP常用函数

    英文字符可用形如 {$vo.title|substr=0,5} 如果是中文字符thinkphp提供了msubstr如下 function msubstr($str, $start=0, $length ...

  10. Web前段优化,提高加载速度 css

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...