css3 transform:scale(x)字体的缩放:

transform:scale(x),针对于整体的缩放,缩放的整体包括宽,高,背景。这自然对于内联元素就无法使用此属性,最好使用无属性的span转换成块元素或者行内块元素进行设置,这样保证外面元素不变的情况下实现自身的缩放。

CSS:

@media screen and (min-width:320px){font-size: 12px;}
@media screen and (min-width:360px){font-size: 14px;}
@media screen and (min-width:420px){font-size: 16px;}
@media screen and (min-width:480px){font-size: 20px;}
@media screen and (min-width:520px){font-size: 24px;}
@media screen and (min-width:640px){font-size: 28px;}
@media screen and (min-width:750px){font-size: 32px;}
.font1{font-size: 1rem;}.displayIB{display:inline-block;}.scaleFont{transform: scale(0.58);}

HTML:

<p class="font1">测试<span class="displayIB scaleFont">888</span>测试</p>

css3 transform:scale(x)实现字体的缩放:的更多相关文章

  1. CSS3 transform 属性详解(skew, rotate, translate, scale)

    写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...

  2. zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...

  3. 小tips: zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...

  4. CSS3 transform属性

    说明: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行移动(translate).旋转(rotate).缩放(scale)或倾斜(skew) transition属 ...

  5. zoom与transform:scale的区别

    一. zoom特性 1. zoom是IE的私有属性,但目前除Firefox不支持外,其他浏览器支持尚好. 2.定义: zoom即变焦,可改变元素尺寸,属于真实尺寸.zoom:百分值/数值/normal ...

  6. 2D转换下的zoom和transform:scale的区别

    一.什么是zoom 在我们做项目和查看别人的网页的时候总会在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢? 它的名字叫zoom,zoom的意思是“变焦”,虽然在摄影的领域经常被提到, ...

  7. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  8. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  9. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

随机推荐

  1. 三分钟学会用SpringMVC搭建最小系统(超详细)_转载

    前言 做 Java Web 开发的你,一定听说过SpringMVC的大名,作为现在运用最广泛的Java框架,它到目前为止依然保持着强大的活力和广泛的用户群. 本文介绍如何用eclipse一步一步搭建S ...

  2. hive parquet table 配置使用压缩

    创建parquet table : create table mytable(a int,b int) STORED AS PARQUET; 创建带压缩的parquet table: create t ...

  3. Ubuntu18.04 解压zip文件乱码的解决方法

    在Ubuntu的系统下解压zip文件的时候居然出现了乱码,通过查找网上的资料,解决的办法有两种 一.通过unzip行命令解压,指定字符集,由于zip格式中并没有指定编码格式,Windows下生成的zi ...

  4. 联想服务器thinkserver TS550 Raid5制作及winserver2012R2 安装过来

    一. 联想服务器thinkserver TS550 Raid5制作 1.开机后按ctrl+i  进入raid配置模式 2.选择“1”配置所需Raid模式(这次配的是raid5) 3.按提示确认后退出 ...

  5. NodeJS学习笔记 (20)错误处理-error

    文章地址 https://github.com/chyingp/nodejs-learning-guide

  6. iOS——集成支付宝 系统繁忙,请稍后再试ALI10

    问题描述:调用支付宝时,显示系统繁忙,请稍后再试(ALI10).代码没有报错,其他也是按照文档来的,为何老是提示显示系统繁忙? 解决方案:还需要在targets的中info里面,添加  url typ ...

  7. Liquibase+spring 初步使用

    现在的工作的项目中用了liquibase,感觉挺爽的,可以跟踪.管理数据库的重构.这对于很多需求变更较大的项目是非常不错的,特别是互联网的项目.(虽然互联网Nosql已经非常流行,不过俺觉得传统关系型 ...

  8. 《R实战》读书笔记一

    你仅仅要想处理数据,<R实战>这本书就能够助你一臂之力. <R实战>的目标是让你认识R,而且可以对数据进行操作.可视化和理解.该书包含4部分16个章节8个附录. 第一部分:入门 ...

  9. vue30-单一事件管理组件通信: vuex

    ------------------------------------------------------ 可以单一事件管理组件通信: vuex var Event=new Vue(); Event ...

  10. nios sgdma(Scatter-Gather dma)示例

    在 Quartus7.2之后的版本中,除了原有的基于avalon-mm总线的DMA之外,还增加了Scatter-Gather DMA这种基于avalon-ST流总线的DMA IP核,它更适合与大量数据 ...