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

10顶
0踩

Web前端

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

2012-06-04 16:47 by 副主编 MnouW 评论(4) 有8756人浏览
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站点由于其非官方性导致其拥有很大一...

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

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

  • 简单的音乐网站界面,有待改进

    小白记录

  • 轴承寿命预测之统计特征提取

    PHM2012滚动轴承全寿命数据集的特征提取环节，提取具有物理意义的统计特征。包含时十几个域、频域等的统计特征提取。最后保存的数据形式是numpy的数据格式。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。

  • postgis-bundle-pg11-3.3.3x64.zip

    postgis-bundle-pg11-3.3.3x64.zip，postgis安装包。 PostGIS 在对象关系型数据库 PostgreSQL 上增加了存储管理空间数据的能力，相当于 Oracle 的 spatial 部分。PostGIS 最大的特点是符合并且实现了 OpenGIS 的一些规范，是最著名的开源 GIS 数据库。

  • 基于VPI，Matlab的光通信仿真，数字信号处理

    基于VPI，Matlab的光通信仿真，数字信号处理

  • 学舟图书阅读管理系统安装使用指南及安装包v3.rar

    学舟图书阅读管理系统是一款单纯的辅助读书、记录笔记并综合整理的软件，能够在其中分门别类地管理图书文章、记录读书过程的心得体会、综合整理图书文章的主题，从而逐步构建、完善自己的知识体系。v3版内置数据文件，因此不再需要安装sql server数据库。

  • 计算机组成原理课程设计2024.doc

    计算机组成原理课程设计2024.doc

  • C++实现的图书管理系统，使用简单的链表

    C++实现的图书管理系统，使用简单的链表

  • 遥感图像分割 DLRSD密集标记数据集.zip

    DLRSD 是一个密集标记数据集，可用于遥感图像检索 （RSIR） 和分类等多标签任务，以及其他基于像素的任务，如语义分割（在遥感中也称为分类）。 在DLRSD的标注过程中，我们改进了一些我们认为通过目视检查标记不准确的多标签，然后使用/参考修订后的多标签来手动标注每个图像的像素。因此，DLRSD 是 UC Merced 存档的扩展，尤其是多标签 RSIR 存档。 DLRSD 共有 21 个大类，每个类有 100 张图像，这与 UC Merced相同。我们用以下 17 个类别标签标记了加州大学默塞德分校档案中每张图像的像素，即飞机、裸土、建筑物、汽车、丛林法院、码头、田野、草地、移动房屋、人行道、沙子、海洋、船舶、坦克、树木和水。这 17 个类标签首先在多标签 RSIR 中构建和定义，其中 UC Merced 中的每个图像都提供了一组多个标签。、 注意： 加州大学默塞德分校档案中某些图像的大小并不像它所说的那样完全是 256256 像素。在标记像素之前，我们将这些图像的大小调整为 256256。 DLRSD还可用于多标签任务，例如多标签场景分类和多标签图像检索等。

  • 这是一个faster-rcnn的keras实现的库，可以利用voc数据集格式的数据进行训练 .zip

    这是一个faster-rcnn的keras实现的库，可以利用voc数据集格式的数据进行训练。Faster-RcnnKeras 中的两阶段目标检测模型的实现目錄仓库更新 热门新闻性能情况 Performance所需环境文件下载 Download训练步骤 How2train预测步骤 How2predict评估步骤 How2eval参考资料热门新闻2022-04支持多GPU训练，增加多种目标数量计算。2022-03进行了上周的更新，支持step、cos学习率下降法、支持adam、sgd优化器选择、学习率支持根据batch_size自适应调整、新增图片修剪。BiliBili视频中的原仓库地址为https: //github.com/bubbliiiiing/faster-rcnn-keras/tree/bilibili2021-10进行了四分之一的更新，增加大量注释、增加大量可调整参数、对代码的组成模块进行修改、增加fps、视频预测、批量预测等功能。表现训练大脑 权值文件名称 纤维 图片大小 地图 0.5:0.95 地图0.5VOC07+12 voc

  • 激光熔覆仿真comsol通过激光进行熔覆工艺进行仿真，对温度与应力进行研究 采用COMSOL中的固体传热等物理场进行耦合仿真 对激光熔覆工艺完成后的温度分布与应力分布以云图形式输出，并研究某一点温度与

    激光熔覆仿真comsol通过激光进行熔覆工艺进行仿真，对温度与应力进行研究 采用COMSOL中的固体传热等物理场进行耦合仿真 对激光熔覆工艺完成后的温度分布与应力分布以云图形式输出，并研究某一点温度与应力随时间变化的曲线关系，温度梯度随时间变化的曲线关系，第三主应力随时间变化的曲线关系。 以及整个激光熔覆工艺过程的动画。

  • 【岗位说明】物流企业各领导岗位工作职责流程.doc

    【岗位说明】物流企业各领导岗位工作职责流程

Global site tag (gtag.js) - Google Analytics