关闭

字体大小自适应纯css解决方案

时间: 2019-09-04阅读: 385标签: 自适应

viewpoint

css3提供了一些与当前viewpoint相关的元素,vw,vh,vim等。

“viewpoint” = window size
vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, 最小
1vmax = 1vw or 1vh, 最大

兼容性:chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Demo</title>
    <style type="text/css">
        #box { font-size: 4vw;}
    </style>
</head>

<body>
    <div id="box">
        我是靖鸣君 我是靖鸣君 我是靖鸣君
    </div>
</body>
</html>

但是该方案存在一个bug,上面的代码,当浏览器窗口变化的时候,box中的文字并没有按照应有的比例变化,但是css3标准中是这么说的:

When the height or width of the viewport is changed, they are scaled accordingly.


插曲

像这样的问题,我之前也遇到过,比如以下代码(小插曲,可跳过)

<!DOCTYPE HTML>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>CSS3 Demo</title>
    <style type="text/css">
        body, div { margin:0; padding: 0;}
        .wrap { background: blue; width: 100%;}
        .box { width: 900px; height: 200px;}
    </style>
</head>

<body>
    <div class="wrap"><div class="box"></div></div>
</body>
</html>

box的宽度设置为900px,wrap设置为100%;缩小浏览器窗口,当宽度小于900时会出现滚动条,向右滚动,会发现蓝色部分并不是100%,这个问题大家可以去思考下。


bug处理

回到上面的问题,font-size:4vw,应该会使得字体的大小变化,可是他没有,和标准说的不一样,所以可以认为是一个bug。

window.onresize = function(){
    var box = document.getElementById("box");
    box.style["z-index"] = 1;
}

 z-index可以对应的元素被重绘(repaint)。

 延伸一点点关于重绘(repaint)和回流(reflow)的知识:

添加、删除元素(回流+重绘)
隐藏元素,display:none(回流+重绘),visibility:hidden(只重绘,不回流)
移动元素,比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流),或者移动元素到另外1个父元素中。(重绘+回流)
对style的操作(对不同的属性操作,影响不一样)
还有一种是用户的操作,比如改变浏览器大小,改变浏览器的字体大小等(回流+重绘)
让我们看看下面的代码是如何影响回流和重绘的:
var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
// 添加node,再一次 回流+重绘


 其他方案

1. css expression, 这个效率比较低,不推荐使用

#box { star:expression(onresize = function(){
                var res = parseInt(this.style.width) / 20;
                res = res < 9 : "9px" ? res + "px";
                this.style.fontSize = res;
            });
        }
//P.S:上面代码没测试,不知道写错没有

与其说用的css,还不如说是js,而且是效率不够的js

2. media query,这东西也不是特别好用

h2{
  font-size:25px
}

@media screen and (max-width: 850px){/* 可视区域小于 850px, 设置更小font-size属性 */
   h2{
     font-size:19px;
   }
}

用media query会使得字体的变化出现不连贯性,而且要可能设置多个@media,相当麻烦。

3. 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; }}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8108

关闭

Js移动端自适应代码_rem布局

rem 是 css 的长度单位,它是相对于 <html> 元素的 font-size 的相对值。假设 html { font-size: 20px; },那么 1rem 就等于 20px。

移动端自适应

js动态设置html的字体大小,设计稿宽度750px,设备宽度350px,此时HTML 的font-size:50px,及1rem=50px;设置html的font-size: 13.33vw,设置html的font-size并缩放页面

高度自适应

高度不去设置,或者高度设置auto 内容撑开父元素的高度。内容撑开父元素的高度 -> 最小高度的设置 min-height,浮动元素添加高度自适应 -> 添加浮动元素的父元素没有高度,会出现高度塌陷

vuejs中拖动改变元素宽度实现宽度自适应大小

拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时

CSS实现宽高等比自适应容器

在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半。于是我们就需要实现一个宽度自适应,高度为宽度一半的容器。

CSS3 @media媒体查询

@media 媒体查询选择性加载css,意思是自动探测屏幕宽度,然后加载相应的CSS文件。可以针对不同的屏幕尺寸设置不同的样式,特别是需要设置设计响应式的页面,@media 是个不错的选择

让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度

HTML中pre和textarea可以显示预格式化的文本。即保留空格和换行符。而不必添加<br>和&nbsp;等HTML元素来添加换行和打印空格。textarea也能跟prev一样保留内容格式,但是元素高度是固定的

iframe 自适应高度的多种实现方式

实现 iframe 的自适应高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求。

CSS自适应正方形问题

移动端项目中经常遇到自适应的问题,下面我们来看看关于自适应的方法:在盒模型中,margin、padding的百分比数值是相对于父元素的宽度计算的,所以将padding值设为与width值相同的百分比即可。

布局之左侧固定,右侧自适应

给左边的固定宽度区left浮动并设置一个宽度,右边的自适应区right只设置margin值,假设right的宽度是100%,那么设置margin后,它得宽度就变为100%-margin;left发现自己的宽度可以和right挤在同一行,它就浮动上来了

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!