第一章 响应式设计之Media Quer
书里谈到尽量不要使用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的更多相关文章
- 前端响应式设计中@media等的相关运用
现在做前端响应式网站特别,响应式成为现在前端设计一个热点,它成为热点的最主要的原因就是,移动端设备屏幕的种类多样,那么如何设置响应式屏幕. /*打印样式*/ @mediaprint{color:red ...
- Ext JS 6学习文档-第8章-主题和响应式设计
Ext JS 6学习文档-第8章-主题和响应式设计 主题和响应式设计 本章重点在 ExtJS 应用的主题和响应式设计.主要有以下几点内容: SASS 介绍和入门 主题 响应式设计 SASS 介绍和入门 ...
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
- 响应式设计的思考:媒体查询(media query)
Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...
- 使用media query 来实现响应式设计
你的网页在手机上显示效果可以在电脑上一样好看.完成这个任务的奥秘被称为响应式设计,媒体查询(media query)是实现网页响应的关键. 在电脑上一个例子: <div class=" ...
- Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
- paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结
paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- CSS 响应式设计
响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...
- 响应式设计的5个CSS实用技巧
正如我在教程响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了.现在我分享在编码时常用的五个CSS技巧并举例说明.这些技巧都是使用简单 ...
随机推荐
- Libvirt 网络管理
- 开发过程中常用的Linux命令
做Java开发好几年了,部署JavaWeb到服务器上,一般都选择Linux,Linux作为服务器真是不二之选,高性能,只要熟悉Linux,操作快捷,效率很高. 总结一下工作中常用的Linux命令备忘: ...
- 《计算机问题求解》总结——2014年CCF计算机课程改革导教班(2014.07.11)
一:引言 "心想事成".这是自己获得导教班学习机会的最佳概括.2013年年末学习李晓明老师的<人群与网络>课程:随后网络认识烟台大学贺利坚老师,了解到2013年 ...
- Android程序开发0基础教程(一)
程序猿学英语就上视觉英语网 Android程序开发0基础教程(一) 平台简单介绍 令人激动的Google手机操作系统平台-Android在2007年11月13日正式公布了,这是一个开放源码的操 ...
- 一步步学Mybatis-以接口操作的方式编程(2)
上一章节中,我们已经搭建玩了最简单的能够运行的HelloWorld环境,这一章将把上章中的操作方式改为以接口的方式操作 我们可以发现在上一个章节中 public static void testBas ...
- Android Studio下载安装使用教程
最近Google的在Google I/O大会上推出了一款新的开发工具android studio.这是一款基于intellij IDE的开发工具,使用Gradle构建,相信做过java的童鞋们都知道这 ...
- BBOSS框架使用jquery方式传參到后台的时候,要注意的事项
BBOSS框架.从前台传到后台的时候,參数要以这样的方式: public String initAddOrModExtendUser(HttpServletRequest request, ...
- ActivityGroup+LinearLayout实现iphone风格的底部tab菜单
public class ActsGroup extends ActivityGroup { private LinearLayout bodyView; private Line ...
- 强大的ASP.NET控件---验证控件
学习完了牛腩之后,在进行ASP.NET的学习的时候,对全部学的知识.都有一种似曾相识的感觉,"哦,这个,在牛腩新闻公布系统中用过".仅仅只是那时候.用的也是迷迷糊糊的,就说 ...
- cocos2d-x make: *** [clean-box2d_static-armeabi] Error 1
/cygdrive/d/android-ndk-r8e/build/core/build-binary.mk:52: recipe for target `clean-cocos_curl_stati ...