谷歌最小字体为12px问题的解决

最近在做手机适配的问题,要把电脑端变成手机端能正常浏览的网页,那么就要改动一下字号。我依次减少字号看效果,但是在谷歌浏览器上,当我减小到12px以下的时候,发现字体大小并没有什么变化,这时我就纳闷了,要怎么样才能改变大小呢?

我在网上搜索了一下,大家的观点都是下面这个:
html{   -webkit-text-size-adjust:none; }
亲自实践了一下,发现并没有什么用啊。

在继续的搜寻之下,我有发现了另外的一种方法,就是缩放方法
.small{ font-size: 12px; -webkit-transform-origin-x: 0; -webkit-transform-origin-y: 0; -webkit-transform: scale(0.6); }
首先是定义字体为12px,-webkit-transform-origin-x属性是定义了x方向(水平)的基点位置,-webkit-transform-origin-y属性是定义了y方向(竖直)的基点位置, scale(0.6)是缩放比例,最终的字体大小就是12px * 0.6 =7.2px,这就实现了字体缩放的效果,但是可能某些浏览器不兼容一些属性,所以应该再写一个font-size为10.8px,在这个要缩放的标签上添加class="small small-size"这个属性。
.small-size{ font-size:10.8px; }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,208评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,344评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,810评论 0 2
  • 一 我在厨房做饭,又听见老公不知为啥对儿子嚎嚎上了。 “爸爸,你不能对我好一点吗?你光对我坏一点,坏爸爸!我不爱你...
    痴行人阅读 185评论 0 1
  • 这一次,我决定跟自己在一起,决定沉默。 感受着"评判"带来的"伤害",感受着自己"口没遮拦"引来的"祸端",我知道...
    作家阿紫阅读 215评论 0 1