h5项目自适应字体和宽高。用rem
已知:
1、浏览器默认的字号是16px,html{font-size: 87.5%;}(16*0.875 = 14px)。
2、css中的单位换算:rem 与 px 的换算为 px = rem * 设置的根节点字号。
3、注意,html 字体大小最小为 12px;如果设置为10px,则换算后的 px 依然按照 12px 计算
待搞清楚

思路:html的font-size设置为:网页宽度/设计稿宽度*10 px,css设置时就按照设计稿的大小,如宽为10px,css设置成1rem。这样,html的fong-size就相当于等比放大缩小的系数*10。
在网页加载完成后运行如下代码。designWidth是参考的设计稿的网页宽度(我的一般参考375px),maxWidth是设计稿的最大网页宽度,一般为750。运行该函数后,将设计稿的px对应成css的rem就好。比如设计稿中font-size:10px,css为font-size:1rem。
除此之外,在网页代码的头部,加入一行viewport元标签<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
h5项目自适应字体和宽高。用rem的更多相关文章
- 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...
- 翻屏类 h5 适配方案:解决宽高自适应难题
表格 图片等 宽度自适应 :width:100%; box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及 ...
- NGUI 屏幕自适应(初始设定宽高800x480只支持比其大的屏幕)
自适应讲解部分可以参考以下网址:http://www.xuanyusong.com/archives/2536,下面代码中提到的AdaptiveManualHeight()函数就是参考该文章的. 下面 ...
- 【项目笔记】拿宽高前measure(widthMeasureSpec, heightMeasureSpec)的使用技巧
我们知道获取宽高一般写法是: view.measure(0, 0); view.getMeasuredHeight(); 拿宽高前什么时候可以直接用measure(0, 0);而什么时候不能用meas ...
- CSS实现宽度自适应100%,宽高16:9的比例的矩形
现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 代码 HTML &l ...
- CSS实现宽度自适应100%,宽高16:9的比例的圖片或者矩形
前言 图片的大小是多少,宽度一定,高度要始终自自适应为16:9. 解决 1通过js,程序算出绝对高度再进行设置.这是解决问题最容易想到的方法. 2.我们的原则是能用css实现的功能尽量用css,这有利 ...
- 获取iframe自适应后的宽高
1.同域 一:引入jquery <script type="text/javascript" src="../jquery.min.js">< ...
- cocos2dx获得字体的宽高
Android: 1.在CCImage中添加下面的方法: //头文件声明略. cocos2d::CCSize CCImage::getStringSize(const char *text, cons ...
- js实现字体和容器宽高随窗口改变
用于字体大小和容器的宽高字体和宽高设为rem就可以了 var html = document.documentElement; function fonts(){ var hW = html.offs ...
- 007. 自定义ListBox的item的宽高, 字体居中
/// <summary> /// 自定义ListBox的item的宽高, 字体居中 /// </summary> /// <param name="sende ...
随机推荐
- 彻底理解Python中的闭包和装饰器(上)
什么是闭包 闭包(Closure)其实并不是Python独有的特性,很多语言都有对闭包的支持.(当然,因为Python是笔者除C/C++之外学习的第二门语言,所以也是第一次遇到闭包.)简而言之,闭包实 ...
- SQL语句使用
目录 一:sql语句 1.什么是SQL语句? 二:基本SQL语句之库操作 三:基本SQL语句之表操作 1.查看当前所在库名称 2.切换数据库 四:基本SQL语句之记录操作 五:创建表的完整语法 六:操 ...
- 使用Google OR-Tools分析过去20年中国金融资产最佳配置组合
前两天,在朋友圈里看到一张截至2022年Q2的金融资产历年收益图如下,图中列举了国内从2005年到2022年近20年主要的金融资产历年收益率,随产生想法分析和验证下面几个问题: 过去20年,基于怎样的 ...
- List排序(降序)
一.添加一个比较器 点击查看代码 import java.util.Comparator; /** * @Classname ComparatorResultType * @Description 排 ...
- js修改数组中的属性名
将数组 [{id:"1",name:"AAA"}] 修改为 ===> [{id:"1",text:"AAA",va ...
- 详解JAVA线程问题诊断工具Thread Dump
摘要:Thread Dump是非常有用的诊断Java应用问题的工具. 本文分享自华为云社区<调试排错 - Java 线程分析之线程Dump分析>,作者:龙哥手记. Thread Dump是 ...
- 使用IntelliJ IDEA打开一个项目步骤
目录 1.普通java项目 步骤一.使用IDEA打开一个新的项目 步骤二.设置项目的SDK 步骤三.设置项目的src为Resources Root 2.Maven项目 前三步同普通java项目相同 ...
- 小型web产品的功能测试要点或测试大纲
本文参考配置啦:-- Web类产品功能测试大纲,黑盒测试参考测试范围 [官网]:无 应用场景 黑盒测试,功能测试中常常需要考虑很多问题,这里根据本人的工作经验遇到的进行了系列总结.给出了一个常用的测试 ...
- 【好软推荐】Scoop - Windows快速软件安装指南
在平常生活中如果要安装像git.java.node这些环境的时都需要先去官网下载安装程序,点击安装,之后还需要配置,不仅过程麻烦,而且工具多了之后整理起来也相当不容易,配置也很杂,整个电脑就像被污染了 ...
- UVA12412 A Typical Homework (a.k.a Shi Xiong Bang Bang Mang)
简要题意 这道题就是要你维护一个学生成绩管理系统. 代码实现 程序设计 为了方便输出,我们定义了 println 函数: void println(string s){ cout<<s&l ...