资讯频道 → Web前端
阅读更多

10顶
0踩

Web前端

转载新闻 响应式设计的 5 个 CSS 实用技巧

2012-06-04 16:47 by 副主编 MnouW 评论(4) 有8770人浏览
css 响应式 设计 margin Overflow
正如教程响应式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%。 

.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 \0screen {
  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   /  译者：Vivien Chen
  • 大小: 5 KB
  • 大小: 12.6 KB
  • 大小: 28.8 KB
  • 大小: 34 KB
  • 大小: 16 KB
  • 大小: 13.1 KB
来自: Vivien's blog
10
顶
0
踩
评论 共 4 条 请登录后发表评论
4 楼 hehebaiy 2012-06-05 16:23
很实用，收下了~~
3 楼 zfcejb 2012-06-05 12:47
大部分应该用过吧
2 楼 Creszzle 2012-06-05 10:24
很实用，有复杂性整合实例就完美
1 楼 ljinkai_ljk 2012-06-05 09:44
good ,收了

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 万普SDK使用说明

    万普世纪移动营销服务平台(以下称为“万普平台”)的Android 版SDK 提供了一套现成的开发包及Demo源代码，便于开发者在Android应用中方便的集成万普平台的各项功能，包括万普统计、虚拟货币、流量交换、互动广告、推...

  • 万普平台Android版SDK开发者手册

    万普世纪移动营销服务平台(以下称为“万普平台”)的Android 版SDK 提供了一套现成的开发包及Demo源代码，便于开发者在Android应用中方便的集成万普平台的各项功能，包括万普统计、虚拟货币、推荐列表、互动广告、...

  • 国内移动开发者应掌握三大盈利模式

      自从全球最大的移动广告平台Admob被Google以7.5亿美金...随着Android和iPhone等平台的兴起，国内最早做移动广告平台的万普世纪、亿动广告和架势无线等公司均相继宣布全面进军智能应用市场。 据不完全统计，国内仅

  • 开发Android应用赚钱

    随着Android和iPhone等平台的兴起，国内最早做移动广告平台的万普世纪、亿动广告和架势无线等公司均相继宣布全面进军智能应用市场。 据不完全统计，国内仅针对Android应用的移动广告相关平台已超过30家，包括哇棒，...

  • 06年中国互联网10大创新模式 成功运营关键在人

    　合作模式一般主要出现在企业间，而对于万普世纪这个提供独立WAP站点的媒体代理服务机构来讲，合作不是基于企业的，而是基于个人用户的。WAP站点由于其非官方性导致其拥有很大一部分个人用户网站，通过对个人用户的...

  • 互联网十大赚钱商业模式！创业者必看！

    随着互联网宽带化、大众化、个性化、移动化的不断发展，新应用层出不穷。带有Web2.0特征的服务已经越来越多地进入网民的视野：RSS、SNS、Tag、Blog、P2P……这些一度只在专业人士的小圈子里出现的概念已经成为众多...

  • 2006中国互联网10大创新模式

    　合作模式一般主要出现在企业间，而对于万普世纪这个提供独立WAP站点的媒体代理服务机构来讲，合作不是基于企业的，而是基于个人用户的。WAP站点由于其非官方性导致其拥有很大一部分个人用户网站，通过对个人用户的...

  • IT时代周刊：2006中国互联网10大创新模式

    8、网络广告媒介资源的合作创新模式 合作模式一般主要出现在企业间，而对于万普世纪这个提供独立WAP站点的媒体代理服务机构来讲，合作不是基于企业的，而是基于个人用户的。WAP站点由于其非官方性导致其拥有很大一...

  • 企业的商业模式和盈利模式概述，业务流程再造

    商业的本质一定是创造更大的的市场，更多的... 什么是商业模式，我认为应该包含两个方面：一个是产品形态（解决问题的方式），另一个是盈利模式。盈利模式比较容易理解，就是怎样赚钱，几乎所有的商业模式的赚钱...

  • 一个基于Qt Creator（qt,C++）实现中国象棋人机对战

    qt 一个基于Qt Creator（qt,C++）实现中国象棋人机对战.

  • 热带雨林自驾游自然奇观探索.doc

    热带雨林自驾游自然奇观探索

  • 冰川湖自驾游冰雪交融景象.doc

    冰川湖自驾游冰雪交融景象

  • C51 单片机数码管使用 Keil项目C语言源码

    C51 单片机数码管使用 Keil项目C语言源码

  • 基于智能算法的无人机路径规划研究 附Matlab代码.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

  • 前端分析-2023071100789s12

    前端分析-2023071100789s12

  • Delphi 12.3控件之Laz-制作了一些窗体和对话框样式.7z

    Laz_制作了一些窗体和对话框样式.7z

  • ocaml-docs-4.05.0-6.el7.x64-86.rpm.tar.gz

    1、文件内容：ocaml-docs-4.05.0-6.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/ocaml-docs-4.05.0-6.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持：公众号禅静编程坊

  • 学习笔记-沁恒第六讲-米醋

    学习笔记-沁恒第六讲-米醋

  • 工业机器人技术讲解【36页】.pptx

    工业机器人技术讲解【36页】

  • 基于CentOS 7和Docker环境下安装和配置Elasticsearch数据库

    内容概要：本文档详细介绍了在 CentOS 7 上利用 Docker 容器化环境来部署和配置 Elasticsearch 数据库的过程。首先概述了 Elasticsearch 的特点及其主要应用场景如全文检索、日志和数据分析等，并强调了其分布式架构带来的高性能与可扩展性。之后针对具体的安装流程进行了讲解，涉及创建所需的工作目录，准备docker-compose.yml文件以及通过docker-compose工具自动化完成镜像下载和服务启动的一系列命令；同时对可能出现的问题提供了应对策略并附带解决了分词功能出现的问题。 适合人群：从事IT运维工作的技术人员或对NoSQL数据库感兴趣的开发者。 使用场景及目标：该教程旨在帮助读者掌握如何在一个Linux系统中使用现代化的应用交付方式搭建企业级搜索引擎解决方案，特别适用于希望深入了解Elastic Stack生态体系的个人研究与团队项目实践中。 阅读建议：建议按照文中给出的具体步骤进行实验验证，尤其是要注意调整相关参数配置适配自身环境。对于初次接触此话题的朋友来说，应该提前熟悉一下Linux操作系统的基础命令行知识和Docker的相关基础知识

Global site tag (gtag.js) - Google Analytics