css 文字自适应大小_div自适应窗口大小

css 文字自适应大小_div自适应窗口大小viewpointcss3提供了一些与当前viewpoint相关的元素,vw,vh,vmin,vmax等。“viewpoint”=windowsizevw=1%ofviewportw

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

viewpoint

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

“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+

DEMO地址:http://qianduannotes.sinaapp.com/test/fontResize.html  (已经用JS修正重绘bug)

<!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>

 

DEMO地址:http://qianduannotes.sinaapp.com/test/paintBug.html

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

 

bug处理

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

window.onresize = function(){
    var box = document.getElementById("box");
    box.style["z-index"] = 1; //显式的触发repaint
}

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

 

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

1. 添加、删除元素(回流+重绘)
2. 隐藏元素,display:none(回流+重绘),visibility:hidden(只重绘,不回流)
3. 移动元素,比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流),或者移动元素到另外1个父元素中。(重绘+回流)
4. 对style的操作(对不同的属性操作,影响不一样)
5. 还有一种是用户的操作,比如改变浏览器大小,改变浏览器的字体大小等(回流+重绘)
让我们看看下面的代码是如何影响回流和重绘的:
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 实现平滑转变

 DEMO地址:http://qianduannotes.sinaapp.com/test/fontResize2.html

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

 

小结

这玩意儿其实也没太大作用,用JS处理相当简单,不知道大家还有没有其他比较好的方案,可以提出来交流下~

—————————————————————–

4. rem + js

 

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

 

px:绝对单位,页面按精确像素展示

em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。

(另外需注意chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准,所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。

rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取)

页面基准320px(20px),html font-size值的计算:

[javascript] 
view plain
copy

 

  1. var ele=document.getElementsByTagName(“html”)[0],  
  2.      size=document.body.clientWidth/320*20;  
  3. ele.style.fontSize=size+“px”  

注:需设置meta缩放比1:1
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no” />

 

 

vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
vmin:vw和vh中较小的那个。
vmax:vw和vh中较大的那个。

vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,ios safari 8+支持,android browser4.4+支持,chrome for android39支持

 

其它的单位还有:
%:百分比
in:寸
cm:厘米
mm:毫米
pt:point,大约1/72寸

pc:pica,大约6pt,1/6寸

 

ex:取当前作用效果的字体的x的高度,在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持,firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)

ch:以节点所使用字体中的“0”字符为基准,找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167023.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 硬盘没有初始化怎么恢复数据_初始化磁盘崩溃转储怎么处理

    硬盘没有初始化怎么恢复数据_初始化磁盘崩溃转储怎么处理没有初始化是因为分区表损坏了,导致硬盘出现没有初始化。磁盘显示没有初始化恢复数据办法工具/软件:光明数据恢复软件步骤1:软件运行后,直接双击需要恢复文件的磁盘。步骤2:坐等软件扫描完毕大概需要几分钟到半个小时,稍微耐心等下即可。步骤3:勾上所有需要恢复的数据,然后点右上角的保存,《另存为》按钮,将勾上的文件COPY出来。步骤4:等待软件将资料复制完成就可以了。注意事项1:没有初始化恢复出来的资料需要暂时保存到其它盘里。注意事项2:想要恢复没有初始化需要注意,在文件找到之前,不要

  • selenium的PO模式

    selenium的PO模式PageObject模式是Selenium中的一种测试设计模式,主要是将每一个页面设计为一个Class(封装在一个class类中),其中包含页面中需要测试的所有元素(按钮,输入框,标题等)的属性和操作,这样在Selenium测试页面中可以通过调用页面类来获取页面元素,这样巧妙的避免了当页面元素id或者位置变化时,需要改测试页面代码的情况。当页面元素id变化时,只需要更改测试页Class中页面的属…

  • hashmap低层原理(js底层原理)

    数组:其实所谓的数组指的就是一组相关类型的变量集合,并且这些变量彼此之间没有任何的关联。存储区间连续,占用内存严重,数组有下标,查询数据快,但是增删比较慢;链表:一种常见的基础数据结构,是一种线性表,但是不会按照线性的顺序存储数据,而是每一个节点里存到下一个节点的指针。存储区间离散,占用内存比较宽松,使用链表查询比较慢,但是增删比较快;哈希表:Hashtable既满足了数据的快速查询(…

  • linux跨网段实现内网互通_docker跨主机通信

    linux跨网段实现内网互通_docker跨主机通信1.简介TCP协议规定只有处于同一个网段的IP才能实现互通,如果处于不同网段,可以配置一台双网卡机器为网关然后指定路由线路实现跨网段访问。实现思路:将双网卡服务器作为一个代理服务器,实现双向网关的一个功能如上图所示,Proxy作为双向网关Client如果要实现Server的互通,如果Client和Server在同一个子网段可以直接ping同,但是如果不在同一个网段,Client就会先去找其网关,再由其网关寻找Server,对于Server也是这样。2.实现方案2.1代理1.开启数据包的转发功

  • Matlab矩阵复制扩充

    考虑这个问题:定义一个简单的行向量a    如何复制10行呢?即:    同理,对于一个列向量,如何复制10列呢?  关键函数1:repmat(A,m,n):将向量/矩阵在垂直方向复制m次,在水平方向复制n次。      再举一个例子,对于a=[12;34]:         垂直方向复制3次,水平方向复制2次,

  • 在非Activity中使用startActivityForResult

    在非Activity中使用startActivityForResult在开发过程中有时会有需要在非activity中,跳转到另一个activity中,再携带某些值回到先前的页面,我们在很多地方可以拿到context,但这个时候想使用startActivityForResult时却发现无法调用,因为这个方法是Activity下的,而非Context下,这个时候只需要强转一下即可,将获取到的context转成activity就可以使用这个方法了,在我的…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号