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

浏览器中用户都是可以自定义默认的文字大小的,如果使用 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. 【JRebel 作者出品--译文】Java class 热更新:关于对象,类,类加载器

    一篇大神的译文,勉强(嗯..相当勉强)地放在类加载器系列吧,第8弹: 实战分析Tomcat的类加载器结构(使用Eclipse MAT验证) 还是Tomcat,关于类加载器的趣味实验 了不得,我可能发现 ...

  2. Redis 学习笔记(篇三):跳表

    跳表 跳表(skiplist)是一种有序的数据结构,是在有序链表的基础上发展起来的. 在 Redis 中跳表是有序集合(sort set)的底层实现之一. 说到 Redis 中的有序集合,是不是和 J ...

  3. List集合总结,对比分析ArrayList,Vector,LinkedList

    前面已经写了三篇关于Java集合的文章,包括: Java集合 ArrayList原理及使用 再说Java集合,subList之于ArrayList Java集合 LinkedList的原理及使用 关于 ...

  4. 把VSCode配置成C/C++开发IDE

    工作一年多了,大学学的数据结构和算法都忘得差不多了.于是想补补数据结构知识,并且刷一下剑指offer的一些面试题.首要问题就是装个C语言的运行环境,大学学C语言和C++的时候都是用的VC++6.0或者 ...

  5. devexpress GridView按条件给行号上色

    private void gridView1_CustomDrawCell(object sender, DevExpress.XtraGrid.Views.Base.RowCellCustomDra ...

  6. C#—使用InstallerProjects打包桌面应用程序

    前言 打包桌面应用程序实在是一个不常使用的东西,偶尔使用起来经常会忘东忘西的耽误时间,因此,这篇文章多以图片记录过程,也是用于备忘. 下载打包工具 C#打包桌面应用程序有很多种方法,这里介绍一种使用M ...

  7. 为什么建议大家使用 Linux 开发

    Linux 能用吗? 我身边还有些朋友对 linux 的印象似乎还停留在黑乎乎的命令行界面上.当我告诉他或者建议他使用 linux 时,会一脸惊讶的问我,那个怎么用(来开发或者日常使用)? Linux ...

  8. 关于重写equals()和hashCode()的思考

    最近这几天一直对equals()和hashCode()的事搞不清楚,云里雾里的. 为什么重写equals(),我知道. 但是为什么要两个都要重写呢,我就有点迷糊了,所以趁现在思考清楚后记录一下. 起因 ...

  9. 【朝花夕拾】Android自定义View篇之(九)多点触控(下)实践出真知

    前言 在上一篇文章中,已经总结了MotionEvent以及多点触控相关的基础理论知识和常用的函数.本篇将通过实现单指拖动图片,多指拖动图片的实际案例来进行练习并实现一些效果,来理解前面的理论知识.要理 ...

  10. java 学习之路第一节

    一.安装mysql驱动:http://mvnrepository.com/search?q=mysql-conn 二.看数据库中有什么表安装:navicat for MySQL 文件类写数据库查询: ...