前端-根据页面大小动态计算字体大小

 1 // 动态计算字体大小
 2 (function(){
 3     var size= function(){
 4        //获取当前屏幕相关
 5         var docElement = document.documentElement;
 6        //三元比较计算
 7         var clientWidthValue = docElement.clientWidth > 640 ? 640 : docElement.clientWidth;
 8        //根据自己需要设置字体大小
 9         docElement.style.fontSize = 20*(clientWidthValue/375) + ‘px‘;
10     }
11     size();
12    //设置
13     window.addEventListener(‘resize‘,size);
14 })();

参考:https://blog.csdn.net/emperor_cj/article/details/78592447

原文地址:https://www.cnblogs.com/nongfusanquan/p/11718913.html

时间: 2024-08-08 07:49:22

前端-根据页面大小动态计算字体大小的相关文章

动态计算字体大小

<script> //orientationchange方向改变事件 (function (doc, win) { var docEl = doc.documentElement,//根元素html //判断窗口有没有orientationchange这个方法,有就赋值给一个变量,没有就返回resize方法. resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function

ios8中的self sizing cell和ios7动态变化字体大小

1.ios7动态变化字体大小 self.titleLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleCaption2]; self.ssubLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody]; 2.ios8中的self sizing cell self.tableView.estimatedRowHeight = 44; self.tabl

设置全局导航栏颜色,标题大小和UIBarButtonItem字体大小

设置全局导航栏颜色,标题大小和UIBarButtonItem字体大小 在appdelegate里面设置 swift: UINavigationBar.appearance().barTintColor = UIColor.init(red: 47, green: 48, blue: 52) UINavigationBar.appearance().tintColor = UIColor.whiteColor() UINavigationBar.appearance().titleTextAttr

CSS font-size字体文字大小样式属性-字体大小样式篇

一.设置字体大小CSS单词与语法 - TOP基本语法结构: .divcss5{font-size:12px;}设置了文字大小为12px像素Font-size+字体大小数值+单位 单词:font-size语法:font-size : absolute-size | relative-size | length取值:xx-small | x-small | small | medium | large | x-large | xx-largexx-small:最小x-small:较小small:小m

移动端应该如何动态设置字体大小?

rem由来:font size of the root element,那么rem是个单位,单位大小由它第一代老祖宗的font-size的大小决定.现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康,因为不仅要知道rem是个单位,更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB. 事故造成原因:1.px单位在PC上很流行,在手机屏幕上一看,MLGB的,同样的12px却小的跟蚂蚁似的.2.好不容易在iPhone4上调的正常了,换个菊花牌手机,MBD不堪入目了.3.知道

移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题

一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面.Android的可以通过webview配置webview.getSettings().setTextZoom(100)就可以禁止缩放,按照百分百显示. 二.用户调整浏览器字体大小,影响的是从浏览器打开的web页 浏览器设置字体大小,影响浏览器打开的页面.通过js可控制用户修改字体大小,使页面不受影响. (function(doc, win) { // 用原生方法获取用户设置的浏览器的字体大小(兼容i

如何在代码中动态设置字体大小

//给一个id为name的TextView设置字体大小 TextView mName = (TextView)findViewById(R.id.name); mName.setTextSize(22); 开始学Android的时候,设置字体大小,无非用上面的代码.写的非常舒服,都不知道22用的是什么单位,字体太小,数字改大点,字体太大,数字改小点.Android编写多了,想要读dimens里设置的22值.很简单下面就是代码. www.2cto.com [java] //XML中的定义<dime

动态计算字符串大小

- (CGSize)getframeAndStr:(NSString*)str andwidth:(int)width { CGSize lasize = [str sizeWithFont:[UIFont systemFontOfSize:15] constrainedToSize:CGSizeMake(width, 300) lineBreakMode:NSLineBreakByWordWrapping]; return lasize; } width: 自己定义需要现实的字符串宽度 300

有关jqGrid应用里的字体大小不能控制的问题

Google.Github 双重认证前端课程,独家硅谷内容,每周直播辅导,限时报名>>>   最近项目里用到了struts2里的jqGrid插件,有个很奇怪的问题找了好长时间,比如:字体样式修改不了的问题,具体描述请参考附件图片,包含有问题的和修改后的对比图(je不能直接插入本体图片啊) 就是grid的表头和内容字体样式不能修改,一直是缺省的16px大小和加粗的,并且分页显示也很别扭 后来找了好长时间发现是因为我的页面<!DOCTYPE 定义有问题,jqGrid支持过渡型的申明,也