文档章节

CSS实现字体大小自适应

tbaby
 tbaby
发布于 2014/06/26 16:05
字数 141
阅读 1278
收藏 0
CSS

CSS中通过media query + -webkit-transition来实现字体大小自适应

div{    
font-size: 40px;   
 -webkit-transition:font-size 0.2s ease-out; 
}
@media only screen and (max-width: 1200px) { div{ font-size: 39px; }}
@media only screen and (max-width: 1100px) { div{ font-size: 38px; }}
@media only screen and (max-width: 1000px) { div{ font-size: 37px; }}
@media only screen and (max-width: 900px) { div{ font-size: 36px; }}
@media only screen and (max-width: 800px) { div{ font-size: 35px; }}
@media only screen and (max-width: 700px) { div{ font-size: 34px; }}
@media only screen and (max-width: 600px) { div{ font-size: 33px; }}
@media only screen and (max-width: 500px) { div{ font-size: 32px; }}
@media only screen and (max-width: 400px) { div{ font-size: 31px; }}
@media only screen and (max-width: 300px) { div{ font-size: 30px; }}


© 著作权归作者所有

共有 人打赏支持
tbaby

tbaby

粉丝 23
博文 32
码字总数 14718
作品 7
深圳
网页/平面设计
私信 提问
干货!web页面完美解决自适应的问题

版权声明:本文为章鱼哥原创文章,若要转载,请注明出处 https://blog.csdn.net/qq40388552/article/details/84838474   前段时间做了一个大数据前端页面显示的项目,在项目的收尾阶段,遇...

很有想法的小伙子
2018/12/05
0
0
浅谈Web自适应

前言 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端...

数通畅联
2016/08/19
75
0
关于web中的自适应布局

一、”自适应网页设计”的概念 2010年,Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)--这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。 二、允许网页宽...

名字已被取
2016/04/15
80
0
HTML5+CSS3的响应式网页设计:自动适应屏幕宽度

这几天都在修改博客上面的样式。本来用的是d83.0的模板。自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果。对CSS3不是特别的熟练,只...

初雪之音
2016/07/19
72
0
响应式和自适应区别

玩前端也有几个月了,发现大家普遍混淆了响应式和自适应的概念。先给大家体验一下响应式和自适应的区别,请放大缩小一下屏幕尝试 自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http...

前端_牛牛
2016/01/20
277
2

没有更多内容

加载失败,请刷新页面

加载更多

vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
41分钟前
0
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
4
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部