WEB响应布局

[15/06月,15]
  em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
  任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

  em有如下特点:
  1、em的值并不是固定的;
  2、em会继承父级元素的字体大小。

  所以我们在写CSS的时候,需要注意两点:
  1、body选择器中声明:font-size=62.5%;(10/16=0.625);即:

body{
  font-size=62.5%;
  /*相当于,font-size:10px(16px*0.625)*/
}

  2、将你的原来的px数值除以10,然后换上em作为单位;
  3、重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

  也就是避免1.2 * 1.2= 1.44的现象。比如,在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
  但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。

时间: 2025-01-02 15:05:26

WEB响应布局的相关文章

响应式Web设计 – 布局

写在前面 去年上半年,我开始着手推动项目中响应式设计的落地.以官网优化需求为契机,主动去做了响应式的页面设计,也说服了产品.设计和开发的相关同事一起把它上线落实,但不幸的是,由于各种方面的原因,比如,生搬硬套的PC模块,无差异化的设计使得移动端阅读不佳,导航兼容性有限等等原因,上线几个月后又悄然下线.我不禁反思,项目中是否应该推行响应式?今年年初重新启动了全站响应式项目,从产品.交互.视觉到开发,各个角色全方面参与了响应式项目,最终门户的页面实现全面响应式.在项目过程中有技术沉淀,也有不少的思考

web响应式!

今天学的新内容,web响应式,响应式一般都是用于手机软件界面比例适应,响应式分为三步:1.流式布局.2.媒体查询.3.media-queries,流式布局是可根据屏幕大小自动调节,媒体查询是做此事所需的最强大的工具,让我们使用百分比宽度来布局,然后在浏览器变窄到无法容纳侧边栏中的菜单时,把布局显示成一列,media-queries要在HTML中插入一句话:<meta name="viewport" content="width=device-width; initial

web响应式图片设计实现

.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { text-align: center; margin-top: 20px; margin-left: 10px; margin-bottom: 20px } a { cursor: pointer; text-decoration: none; color: gray } a:hover { text

Web响应式设计中应避免的八大误区

开发一个带有响应式交互设计的网站变得非常有意义,因为其可以在不同的设备运行,因此,你可以节约针对不同平台开发不同网站的成本.但是,要做最大限度相应的网页设计,有些误区你应当避免. 不要优先为桌面版设计 开发者通常会犯的一个常见错误是,但他们设计网站时优先考虑桌面版,因为在这些人严重,将基于桌面版的网站转变为针对其他设备的响应式web设 计 是件很轻松愉快的事情.但是,这个发生在计划规划阶段的错误本身会变成一个非常巨大的问题.甚至会造成返工,当然,大量的错误也会蔓延出来. 然而,基于移动设备开发网

Web页面布局方式小结

事实上,本文是在Peter Jerde的How much information can be stored by ordering 52 playing cards文章基础上翻译.改编和扩展而来的.当然这是经过Jerde本人首肯的. 注意本文方法并非最优,也没有完全利用所有的信息空间,只是简单的尝试. 有数字的地方就有信息.所以扑克牌中保存信息不是什么新鲜事. PDF文档点这里:下载 原文(英文)点这里:访问 这里有两个DEMO. 编码DEMO,解码DEMO 首先是"DEEP IN SHALL

响应布局

我们上网的时候屏幕有大有小,这就需要做出不一样的页面出来才不会显得单调或太挤了. 例如我们平时上的购物网站,有电脑版的和手机版的,这个就是根据客户的需求做出来的.我们这周讲了响应布局.分别用了两种方法来做.感觉每一种用着都有自己的优缺点,在做网页的时候我们可以先看看需要做成的效果图再来分析用哪种方法.下面我分别讲一下这两种布局: 第一种方法我们用@media来判断出屏幕的大小来选择用哪套CSS.其实我的理解就是分别写出几个CSS,然后再根据屏幕的大小来选择用哪个CSS.几个屏幕大小都一样的就可以

web标准化布局

web-ui是什么?即网页用户界面,包括用户研究.交互设计.界面设计,实现人机交互 web的基本分类 ?门户网站:新浪.网页.腾讯等   ?分类信息网站:赶集网. ?交易类网站:天猫.淘宝等B2B/C2C网站 ?娱乐性网站:视频.游戏等 ?博客类网站:个人对外部发布信息的平台    ?论坛社区类网站:交流平台 ?行业类网站:汽车之家等 ?企业类网站:企业对外展示窗口 ?机构类网站:政府和事业单位的信息网站 ?功能性网站:百度,有道翻译等搜索功能的网站 网页有什么组成:模块(模块是网页界面布局中最

[转]CSS3 Media Query实现响应布局

讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局.响应式布局的优点和缺点以及响应式布局该怎么设计(通 过CSS3 Media Query实现响应布局). 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端—

前端(七)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 文档流本质是 nomal flow (普通流.常规流) 3.BFC(Block Formatting Contxt) 块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干 4.BFC的规则