正如我在教程响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了。现在我分享在编码时常用的五个CSS技巧并举例说明。这些技巧都是使用简单的CSS属性,如min-width、max-width、overflow 和相对属性值,但是这些属性在响应式设计中发挥着很大的作用。
1. 响应式Video (demo)
响应式video的CSS技巧是由tjkdesign.com发现的。我之前的一篇文章介绍过它,你可以在这里阅读。响应式视频会适应它的容器宽度。
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
2. Min & Max Width (demo)
属性设置了元素的最大宽度。其目的是防止元素“越线”。
最大宽度容器
在下面的例子当中,我定义了container的宽度是800px(译注:如果它的父容器不小于800px),但是不超过父容器的90%(如果它的父容器小于800px)。
.container {
width: 800px;
max-width: 90%;
}
响应式图片
使用max-width:100% 和 height:auto,图片能自适应父容器的宽度。
img {
max-width: 100%;
height: auto;
}
上述的CSS在IE7和IE9都能起作用,但是IE8不识别。可以使用width:auto来修复。你可以使用针对IE8的条件CSS,或者使用下面的IE hack:
@media screen {
img {
width: auto; /* for ie 8 */
}
}
Min-Width
相反,它设置了元素的最小宽度。在下面的例子里面,min-width用来定义input的宽度,防止input被拉伸的时候变得过小。
3. 相对值 (demo)
响应式设计中,使用相对值可以简化CSS和改善布局。下面举例说明。
相对Margin
下面的例子是评论列表,使用相对margin来设置。我用百分比的值而不用绝对的像素值来隔开子列表。下面的截图可以看到,如果用像素来定义,子列表会变得越来越小。
相对字体大小
以相对值(如em或%)设置的字体、行高、外边距可以被继承。例如,只要简单地更改父级元素的字体大小,那么它的子元素的字体大小也能随之改变。
相对内边距
下面的截图说明了相对的百分比边距比绝对的固定像素边距更好。左边的容器体现了使用像素边距的不平衡。右边的容器则体现了对容器空间的充分利用。
4. Overflow:hidden技巧 (demo)
如我在之前的文章所说的,可以使用overflow属性来清除浮动。这个技巧很实用。应用overflow:hidden,可以对上一个元素清除浮动,保证当前容器的内容能正常显示。
5. Word-break (demo)
我之前也说过word-wrap 属性。可以在强制长文本(如长URL链接)换行。
.break-word {
word-wrap: break-word;
}
文章来自:5 Useful CSS Tricks for Responsive Design
译文:响应式设计的5个CSS实用技巧,译者:Vivien Chen
原文地址:http://vivienchen.me/5-useful-css-tricks-for-responsive-design/
分享到:
相关推荐
《前端开发实践:JavaScript打造响应式滑动窗口》致力于为前端开发者、网页设计师以及对用户界面交互有兴趣的学习者提供一套全面、实用的滑动窗口制作指南。本资源以实际案例为基础,深入浅出地讲解了如何运用...
你可以学到各种类型的设计模板,包括响应式布局、交互动画、独特的配色方案和创新的界面设计等。不仅适合刚入门的设计师,也适用于经验丰富的专业人士。你也可以学到如何巧妙运用这些模板,以及最新的Web设计趋势和...
我们将分享各种类型的设计模板,包括响应式布局、交互动画、独特的配色方案和创新的界面设计等。不仅适合刚入门的设计师,也适用于经验丰富的专业人士。我们将教您如何巧妙运用这些模板,同时探讨最新的Web设计趋势...
我们将分享各种类型的设计模板,包括响应式布局、交互动画、独特的配色方案和创新的界面设计等。不仅适合刚入门的设计师,也适用于经验丰富的专业人士。我们将教您如何巧妙运用这些模板,同时探讨最新的Web设计趋势...
Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展...
另外,《图灵程序设计丛书·数据可视化实战:使用D3设计交互式图表》100多个代码示例都可以在线浏览! 【电子版来自互联网,仅供预览及学习交流 使用,不可用于商业用途,如有版权问题,请联系删除,支持正版,喜欢...
采用XHTML和CSS设计可重用可换肤的WEB站点 asp.net的网址重定向方法的比较:面向搜索引擎友好 也谈 ASP.NET 1.1 中 QueryString 的安全获取写法 ASP.NET运行模式:PageHandlerFactory 利用搜索引擎引用来高亮页面...
顶层系统,这是Bootstrap支持响应式的重点 少/公用事业少 工具样式,可以分开Bootstap拿出来在平时开发中使用 较少/混合/ 该文件夹存在各模块的mixin,用于代码复用 少/归一化 标准化css,这是一个专门将不同浏览器...
没问题,交互式图表比静态图片更能吸引人去探究本源。好啦,要生成通过浏览器展示的动态图表,首选目前最热门的Web数据可视化库——D3。 这本书很有意思,而且对读者要求不高。不需要知道什么是数据可视化,也不用有...
没问题,交互式图表比静态图片更能吸引人去探究本源。好啦,要生成通过浏览器展示的动态图表,首选目前最热门的Web数据可视化库——D3。, 这本书很有意思,而且对读者要求不高。不需要知道什么是数据可视化,也不用...
● 轻松设计集中式站点的特性 ● 向站点添加电子商务功能的技术 ● 增强应用程序性能的方法... 目录回到顶部↑ 第1章 ASP.NET 2.0和Wrox United 应用程序简介 1. 1.1 将要创建的站点 2 1.2 ASP.NET 2.0-- 创建...
5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...
5个目标文件,演示Address EJB的实现,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口...