改变字体大小实现自适应之js方案A
一、元素大小有两种写法
1、写结果:设计师给的移动端页面sketch设计稿一般是750px宽度,在sublime编辑器里,设置cssrem或rem-unit插件为56px的字体大小。做页面时,设计稿是多少px,就写多少px,sublime会把px自动转换成rem,省略口算或心算。
2、写公式
A、如果设计师给尺寸为375px的sketch设计图,某DIV宽120px,就可以写120rem/28 B、如果设计师给尺寸为750px的psd设计图,某DIV宽120px,就可以写120rem/56
二、移动端自适应要点
1、<!DOCTYPE html> 2、<meta name="viewport"content="initial-scale=1, maximum-scale= 1, minimum-scale=1, user-scalable=no"> 3、多用100%,rem。px较稳定和精确,em是一个相对于父元素字体的大小,rem是相对于根元素字体的大小。 4、fixRem,js引入。非常重要,可以省略媒体查询,不用设置max-width等样式,非常方便。通常以iphone6为标准,375px宽度,28px字体大小。
三、举个例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport"content="initial-scale=1, maximum-scale= 1, minimum-scale=1, user-scalable=no"> <title>改变字体大小做自适应页面</title> <style type="text/css"> body, button, input, select, textarea { font-family: Helvetica; font-size: 12px; border: 0; outline: 0; } body, ul, li { margin: 0; padding: 0; } ul, li { list-style: none; } .mymenu { position: relative; overflow: hidden; border-bottom: 1px solid #e81b75; -moz-box-shadow: 0 0.25rem 0.25rem #c6c5c5; -webkit-box-shadow: 0 0.25rem 0.25rem #c6c5c5; box-shadow: 0 0.25rem 0.25rem #c6c5c5; } .mymenu li { float: left; box-sizing: border-box; width: 25%; text-align: center; background-color: #f55097; border-right: 1px solid #f5b9c6; } .mymenu li a { display: inline-block; width: 100%; height: 1.607143rem; line-height: 1.607143rem; font-size: 0.5rem; color: #fff; text-decoration: none; } </style> </head> <body> <ul class="mymenu"> <li><a href="javascript:;">新年快乐</a></li> <li><a href="javascript:;">羊年大吉</a></li> <li><a href="javascript:;">万事如意</a></li> <li><a href="javascript:;">心想事成</a></li> </ul> <script> window.onload=function() { function fixRem() { var windowWidth = document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth; // windowWidth = windowWidth > 750 ? 750 : windowWidth; var rootSize = 28 * (windowWidth / 375); var htmlNode = document.getElementsByTagName("html")[0]; htmlNode.style.fontSize = rootSize + 'px'; } fixRem(); window.addEventListener('resize', fixRem, false); } </script> </body> </html>
改变字体大小实现自适应之js方案A的更多相关文章
- rem布局和使用js rem动态改变字体大小,自适应
解决rem文字动态改变字体大小: <script> console.log(window.devicePixelRatio); var iScale = 1; iScale = iScal ...
- 使用js rem动态改变字体大小,自适应
<html> <head> <meta charset="utf-8"> <script> console.log(window.d ...
- pycharm设置用滑轮改变字体大小
在电脑第一次安装pycharm之后,发现每次调整代码界面的字体,总是需要到setting里面调整,这样非常不方便,特别是对于代码量很多的时候,我们有时候需要把目光聚焦到某一句代码,这个时候就需要放大, ...
- javascript实现一行文字随不同设备自适应改变字体大小至字数完全展示
产品提了一个小需求,希望一行能展示用户输入的所有文字,因为最多限制为25字符,但是如果夹杂英文/韩文/日文等,即使字符数是一样的,但是展示的长度不一样,则有些title标题会被截断. 效果如图 前提是 ...
- uiwebview 加载html时字体变小 加载前或加载后改变字体大小
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #6122ae } p.p2 { margin: 0.0px 0. ...
- Eclipse 改变字体大小,设置背景色
Eclipse背景颜色修改: 操作界面默认颜色为白色.对于我们长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以我经常会改变workspace的背景色,使眼睛舒服一些.设置方法如下: 1.打开win ...
- vs mfc 静态文本 改变字体大小
VC的对话框字体设置对所有控件都有效,你不能单独地改变某个静态文本的字体.对于你的问题,需要首先用CreateFont来建立一个字体对象,然后调用控件的SetFont,就可以了. 例子: 1.改静态文 ...
- eclipse 改变字体大小
- jquery之css()改变字体大小,颜色,背景色
转: <script type="text/javascript"> $(document).ready(function() { $("#f ...
随机推荐
- ActiveMQ消息的发送原理
持久化消息和非持久化消息的发送策略:消息同步发送和异步发送 ActiveMQ支持同步.异步两种发送模式将消息发送到broker上.同步发送过程中,发送者发送一条消息会阻塞直到broker反馈一个确认消 ...
- unity 3D 学习笔记
1.父对象的初始位置设,即刚开始的空对象的根节点位置应当设置成(0,0,0) 这样设置可以避免以后出现奇怪的坐标. GameObject实际上就是一些组件的容器. unity 使用公用变量原因是,在U ...
- Nginx详解十:Nginx场景实践篇之Nginx静态资源场景配置
一.静态资源WEB服务 1.静态资源类型:非服务器动态运行生成的文件 2.静态资源服务场景-CDN 假设静态资源存储中心在云南,用户在北京去请求一个文件,那么就会造成一个传输的延时,而如果Nginx同 ...
- Python模块之sys模块
sys模块是与Python解释器交互的一个接口 有如下方法 sys.argv 命令行参数的一个列表,第一个参数为程序本身的路径 sys.exit(n) 退出程序,正常退出exit(0) ,异常退 ...
- idea的操作
- 金蝶k3完全卸载,注册表手动清理
HKEY_LOCAL_MACHINE\SOFTWARE\KINGDEE 如果操作系统是64位的,在注册表目录:HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node下面还有一个 ...
- Hadoop java.lang.ClassNotFoundException: org.apache.commons.lang3.StringUtils
.jar 学习好友推荐案例的时候,提交运行时报错找不到StringUtils java.lang.ClassNotFoundException: org.apache.commons.lang3.St ...
- python---使用二叉堆实现的优先队列(列表)
哟,有实用价值 可以看到,加入是随机的,而吐出是顺序的. # coding = utf-8 # 使用二叉堆实现的优先队列(列表) class BinaryHeap: def __init__(self ...
- 新版的K8S中的flannel.yaml文件中要注意的细节
部署flannel作为k8s中的网络插件,yaml文件都大小同异. 但在要注意以下细节. 以前,只需要前面master判断. 现在也需要有not-ready状态了. tolerations: - ke ...
- mysql恢复ibd文件
1.将原表删除,包括ibd和frm文件 2.重新创建表结构. 3.丢弃表空间 alter table tableName discard tablespace; 4.将要恢复的ibd文件拷贝到数据库目 ...