rem等比例自适应手机尺寸
方法:用sass的函数动态计算rem值
$rem : 75px;基准值 设计图是750的宽 设为$rem变量设为75,设计图是350的宽 设为$rem变量设为35,
老的写法 需要用js来配合来动态改变font-size大小
//以iPhone6作为基准屏幕宽度
@function px2rem($px){
$rem : 75px;
@return ($px/$rem) + rem;
}
使用方法 根据设计图量取尺寸大小,直接把数值放入sass函数中即可.
调用sass函数并传入数值,设计图中的元素是24px就把24px传入函数中
span {
display: block;
font-size: px2rem(24px);//调用sass函数并传入数值设计图中是24px就把24px传入函数中
color: #b3b3b3;
}
最后要在HTML中加入以下代码
js:动态调整html的font-size
//动态调整html font-size大小
(function() {
resizeFont(); function resizeFont() {
var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
var htmlDom = document.getElementsByTagName("html")[0];
htmlDom.style.fontSize = htmlWidth / 10 + "px";
}
window.onresize = function() {
resizeFont();
}
})()
现在的写法 原理与老方法相同,就html这里font-size用vw单位来动态改变,不再通过js来改变(1vw等于设备的1/10) 比老版的写法要方便多了,但兼容性不如老版本安卓4.4才支持vw属性
@function px2rem($px){
$rem: 75px;
@return ($px / $rem) + rem;
}
html{
font-size: 10vw;
font-family: "微软雅黑";
}
.box{
width: px2rem(130px);
font-size:px2rem(30px) ;
}
rem等比例自适应手机尺寸的更多相关文章
- 小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸
小程序页面跳转传参 根目录下的 app.json 文件 页面文件的路径.窗口表现.设置网络超时时间.设置多 tab { "pages": [ "pages/index/i ...
- 通过rem自适应屏幕尺寸
通过rem自适应屏幕尺寸 常用的前端单位 px px就是pixel的缩写,设备分辨率,物理像素 pt pt就是point的缩写,逻辑分辨率,逻辑像素 em 参考物是父元素的font-size,具有继承 ...
- 用rem实现WebApp自适应的优劣分析
关于rem实现屏幕自适应布局的讨论还是比较多的,刚好我也看到使用rem实现自适应的web app,所以也来凑下热闹. 说起rem,免不了要联系到em.px,这里简单提提他们的定义和特点. 1. px: ...
- Delphi 实现窗体自适应调整尺寸以适应不同屏幕分辩率的显示问题
给你一段代码,网上转的:unit uMyClassHelpers;//实现窗体自适应调整尺寸以适应不同屏幕分辩率的显示问题.// 陈小斌,2012年3月5日 interface Uses ...
- 移动页面HTML5自适应手机屏幕宽度
标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...
- HTML5 移动页面自适应手机屏幕四类方法
1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...
- 》》HTML5 移动页面自适应手机屏幕四类方法
1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...
- rem是如何自适应的
原文链接:http://caibaojian.com/web-app-rem.html 摘要:rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算 ...
- 移动端H5页面自适应手机屏幕宽度
1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem ...
随机推荐
- sublime集成MinGW,打造C/C++开发环境
MinGW是是将GCC编译器和GNU Binutils移植到Win32平台下的产物,包括一系列头文件(Win32API).库和可执行文件.MinGW是从Cygwin(1.3.3版)基础上发展而来.GC ...
- 如何用纯 CSS 绘制一个世界上不存在的彭罗斯三角形
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RyvgMZ 可交互视频教 ...
- Linux-1.4文件操作命令(grep,cat,tail,head,less,find,chmod,tail,less)
Linux基础命令(grep,cat,tail,head,less,find,chmod,tail,less) grep(常用) grep 指定“文件”搜索文件内容 grep hello 1.txt ...
- MySQL性能优化(五):分表
原文:MySQL性能优化(五):分表 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/vbi ...
- VUE实现国际化
一.前言 趁着11月的最后一天,来写一篇关于前端国际化的实践型博客.国际化应该都不陌生,就是一个网站.应用可以实现语言的切换. 在这就不谈原理,只说说如何实现中英文的切换.做技术的总得先把 demo ...
- 使用sublimeserver启动本地服务器进行调试
最近在做前后端分离的项目,访问后台接口的时候会产生跨域问题,修改了相关配置解决了跨域问题,但是配置中只对开发环境进行了设置,没有设置生产环境,为了验证生产环境确实无法访问后台接口遂npm run bu ...
- openstack dashboard开启https
前提条件: 1.基于http的dashboard能正常访问 2.拥有ssl证书 第一步:修改/etc/openstack-dashboard/local_settings 在DEBUG = False ...
- 基于mini2440嵌入式Linux根文件系统制作(Initramfs和nfs两种跟文件系统)
嵌入式系统由三部分构成: 1.bootoader---bootparameters---2.kernel 3.Root-filesysytem 一个内核可以挂载多个文件系统,但是有一个根文件系统所以叫 ...
- redis弱密码漏洞利用
背景: redis无认证,或者弱密码,可以成功连接到redis服务器 反弹shell拿到的权限取决于redis的启动账号 操作: 1. Centos7安装redis客户端 #yum install r ...
- lightinthebox 批量设置分类产品排列方式为List、Grid、Gallery
lightinthebox 批量设置分类产品排列方式为Grid categories_type = '1'表示List,2表示Grid,3表示Gallery方式 设置单个分类 ; ; ; 设置全部 ' ...