移动端px转rem的两种方法
rem使用方法:
rem ,root element,即相对于根元素的大小,浏览器默认字符大小为16px,此时1rem相当于16px.
方法1 设置font-size:
- body{font-size: 62.5%;}
1em则=16px*62.5%=10px,1.2em则=12px
方法2 使用less或则scss的方式:
若设计稿的宽度为750px,屏宽375px,相对rem为750/2/16rem,若设置默认字符大小25px;则一个元素相对rem为width/50;less中使@r为50rem可简化计算
1 :javascript:
- <script>
- (function() {
- var html = document.documentElement;
- var hWidth = html.getBoundingClientRect().width;//根据屏宽调节大小
- // console.log( hWidth );
- html.style.fontSize = hWidth / 15 + "px";//设置默认字符大小 25
- })()
- </script>
2: less中写入宽度:
- @r:50rem;
- p{
- width: 320/@r;
- }
3:编译后:
- p {
- width: 6.4rem;
- }
scss写法:
2: scss中写入宽度:
- @function t($px) {
- @return $px / 50px * 1rem;
- }
- p {
- width: t(20px);
- }
1 Hbuilder 中自动编译 less:
(1) 首先在node中全局安装less:npm install less -g
(2) hbuilder中打开 工具-预编译-less-编辑-智能完成
(3) 现在保存ctrl+s即可自动编译less文件
2 sublime安装less插件:
1 首先node下全局安装less:npm install less -g
lessc命令可编译less文件
2 然后sublime安装less插件:ctrl+shift+p>install Package>输入less+Enter
支持less高亮
3 安装将less转换为css的less2Css:ctrl+shift+p>install Package>输入less2css+Enter
4 cmd下安装less-plugin-clean-css插件: npm install less-plugin-clean-css -g
然后less文件保存会自动生成css文件
tips:
1:发现如果容器没有设置高度,则相同rem值,显示的字符大小有差异,未设置容器高度字符偏大
移动端px转rem的两种方法的更多相关文章
- windows下获取IP地址的两种方法
windows下获取IP地址的两种方法: 一种可以获取IPv4和IPv6,但是需要WSAStartup: 一种只能取到IPv4,但是不需要WSAStartup: 如下: 方法一:(可以获取IPv4和I ...
- Response.Redirect 打开新窗体的两种方法
普通情况下,Response.Redirect 方法是在server端进行转向,因此,除非使用 Response.Write("<script>window.location=' ...
- C模块回调Lua函数的两种方法
作者:ani_di 版权所有,转载务必保留此链接 http://blog.csdn.net/ani_di C模块回调Lua函数的两种方法 lua和C通过虚拟栈这种交互方式简单而又可靠,缺点就是C做栈平 ...
- Response.Redirect 打开这两种方法的一种新形式
在一般情况下.Response.Redirect 该方法是在server年底转向,因此,除非 Response.Write("<script>window.location='h ...
- ASP.NET MVC 实现AJAX跨域请求的两种方法
通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框 ...
- html之改变图片透明度而不改变文字的透明度--两种方法实现
图片与图片上的文字设置不同的透明度的两种方法: 第一种方法:背景图+定位+background: url(timg.jpg)no-repeat; <!DOCTYPE html> <h ...
- WCF生成客户端代理对象的两种方法的解释
最近在封装WCF,有一些很好的实践就记录下来,大家可以放心使用,所有代码都已经调试过.如果有高手可以大家探讨一下. 在WCF中有两种不同的方法可以用于创建客户端服务对象,他们分别为: 1. 代理构造法 ...
- PHP中对用户身份认证实现两种方法
用户在设计和维护站点的时候,经常需要限制对某些重要文件或信息的访问.通常,我们可以采用内置于WEB服务器的基于HTTP协议的用户身份验证机制. 当访问者浏览受保护页面时,客户端浏览器会弹出对话 ...
- ChemDraw加键的两种方法
绘制化学结构离不开9种ChemDraw键工具,键工具在绘制过程中提供了最大的使用优势,这种优势体现在键角.键长的绘制,故很有必要学习相关的ChemDraw使用技巧.本ChemDraw教程将具体介绍在C ...
随机推荐
- vscode wepy 用户自定义代码片段
VSCode wepy 自定义代码片段 { "wepy-page": { "prefix": "wepy", "body" ...
- C++性能优化笔记
最近着手去优化项目中一个模块的性能.该模块是用C++实现,对大量文本数据进行处理. 一开始时,没什么思路,因为不知道性能瓶颈在哪里.于是借助perf工具来对程序进行分析,找出程序的性能都消耗在哪里了. ...
- SpingBoot之多Profile文件
1.我们在主配置文件编写的时候,文件名可以是 application-{profile}.properties/yml默认使用application.properties的配置: 在我们的项目开发.测 ...
- python 用requests请求,报SSL:CERTIFICATE_VERIFY_FAILED错误
https://www.aliyun.com/jiaocheng/437481.html
- 为什么90%的IT人员都不适合做老大?
什么是格局? 格局就是能够很好的平衡短期利益和长期利益. 过分注重短期利益的人必然会失去长期利益,到头来一定会很普通. 例如:跳槽不断,可能短期薪资会增长,但长期来看后劲可能会不足,未来发展空间会变窄 ...
- cmf5分页相关
//分页配置在app/config.php 'paginate' => [ 'type' => '\cmf\paginator\Bootstrap', 'var_page' => ' ...
- kafka及扩展的安装笔记
参考文件 https://blog.csdn.net/weiwenjuan0923/article/details/76152744 一.首先确认下jdk有没有安装 安装参照这个连接 https:// ...
- Tomcat之web.xml中的<url-pattern>标签
关于web.xml配置中的<url-pattern> 标签<url-pattern> <url-pattern>是我们用Servlet做Web项目时需要经常配置的标 ...
- Python 信号处理 signal 模块
Table of Contents 1. signal模块简介 1.1. signal简单示例 1.2. signal说明 1.2.1. 基本的信号名 1.2.2. 常用信号处理函数 2. signa ...
- 线程、进程、队列、IO多路模型
操作系统工作原理介绍.线程.进程演化史.特点.区别.互斥锁.信号.事件.join.GIL.进程间通信.管道.队列.生产者消息者模型.异步模型.IO多路复用模型.select\poll\epoll 高性 ...