最佳设计:可以让用户自由控制任何页面的文字大小。

浏览器中用户都是可以自定义默认的文字大小的,如果使用 px,用户自行在浏览器设置中改变了文字大小后,网页上是不会变化的。我们不能排除视障用户(如近视)、老年用户不会这么做.

利用CSS3的rem单位,避免了em相对父元素比例的嵌套问题,为了兼容IE低版本的需要添加px单位.

html {
font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/
}
body {
font-size:14px; /*兼容IE*/
font-size: 1.4rem;/*1.4 × 10px = 14px */
}
h1 {
font-size:24px; /*兼容IE*/
font-size: 2.4rem;/*2.4 × 10px = 24px*/
}

既然 rem 的可用性更好,是不是在所有地方都去使用呢?

通常在标题,正文等大面积文字的位置可以使用 rem。

但是在一些特殊的设计场景,rem 可能会导致布局错位,比如这样一个回顶部的按钮:

可以看到”回顶部”三个字通过放大已经改变的样式,这是不希望看到的,这了最好只用px

web设计_2_灵活的文字的更多相关文章

  1. 《无懈可击的Web设计》_灵活的文字

    常见的方法 body{ font-size:12px; } 使用像素单位的优点: 不管使用哪种浏览器或者设备来查看,文字看起来都大小一致. 为什么这么做不是无懈可击的? 以像素为单位设定文字大小之后, ...

  2. 分享29个超赞的响应式Web设计

    原文自:http://www.csdn.net/article/2013-01-16/2813678-responsive-design-websites 最近几年,响应式Web设计不断印入人们眼帘, ...

  3. Web设计思想——渐进增强

    最近在拜读一本Web体验相关的书<渐进增强--跨平台用户体验设计 >,阅读后做些总结,消化一下书中的精髓. 在阅读本文前,可以先思考下面几个问题. 1. 浏览网页的目的是什么? 2. 浏览 ...

  4. web设计之无懈可击

    无懈可击的web设计旨在尽可能地考虑页面元素在各个情况下都能够呈现最好的效果. 1. 思路总览 2. 灵活的文字 3. 可伸缩的导航栏 4. 可扩展的行 5. 自由的框式组件 6. 图片/标题/说明文 ...

  5. 响应式WEB设计的9项基本原则

    响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...

  6. 最佳的 14 个免费的响应式 Web 设计测试工具

    一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...

  7. 推荐15款最佳的响应式 Web 设计测试工具

    响应式网页设计是根据设备的屏幕尺寸,平台和方向来开发的网页,是一种对最终用户的行为和环境作出反应的方法.响应式设计使用灵活的网格和布局,图像和智能使用 CSS 媒体查询的组合.当从它们在不同设备使用的 ...

  8. 响应性web设计实战总结

    响应性web设计实战 响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图 ...

  9. CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

随机推荐

  1. 【搜索引擎】Solr全文检索近实时查询优化

    设置多个搜索建议查找算法 <searchComponent name="suggest" class="solr.SuggestComponent"> ...

  2. scala class中孤立代码块揭秘

    在 scala class中,经常会有很多的代码块需要执行,它们不在任何方法中,只是孤立的代码块. 案例: class Tester(val name:String, num:Integer) { p ...

  3. 【过时】Maven简单安装与集成Eclipse

    前言:MyEclipse前期产品对maven支持性不是很好,而且对maven版本要求很严格,集成后有很多问题,所以推荐 使用比较新的IDE进行开发. 1.环境搭建(只是用IDE集成的不需要系统安装,请 ...

  4. docker相关使用

    安装docker 在CentOS 7上安装docker-ce,首先检查系统中是否已经安装过docker及相关依赖: $ sudo yum remove docker docker-client doc ...

  5. Python中的字符编码

    一.文本编辑器存取文件的原理: #1.打开编辑器就打开了启动了一个进程,是在内存中的,所以,用编辑器编写的内容也都是存放与内存中的,断电后数据丢失 #2.要想永久保存,需要点击保存按钮:编辑器把内存的 ...

  6. Ural 2070:Interesting Numbers(思维)

    http://acm.timus.ru/problem.aspx?space=1&num=2070 题意:A认为如果某个数为质数的话,该数字是有趣的.B认为如果某个数它分解得到的因子数目是素数 ...

  7. python3+pyQt5+QtDesignner实现窗口化猜数字游戏

    描述:使用QtDesignner设计界面,pyQt5+python3实现主体方法制作的猜数字游戏. 游戏规则:先选择游戏等级:初级.中级.高级.魔鬼级,选择完游戏等级后点击“确定”,然后后台会自动生成 ...

  8. 学Redis这篇就够了

    Redis 简介 Redis 优势 Redis 数据类型 string hash list set Zset 小总结 基本命令 发布订阅 简介 实例 发布订阅常用命令 事务 实例 Redis 事务命令 ...

  9. 音频编辑器 OcenAudio v3.1.9.0 绿色便携版

    下载地址:点我 基本介绍 ocenaudio是一款跨平台的,易于使用的,快速的,功能强大的,好用的音频编辑软件.该软件支持Virtual Studio Technology插件,美观.统一的跨平台界面 ...

  10. 前后端分离之Swagger2

    1. 问题描述 随着软件过程的不断发展,前后端分离开发模式被越来越的开发团队使用,今天介绍下前后分离中必用的接口设计与调试工具-swagger2,前端人员根据swagger的描述,进行参数的传递:前后 ...