详解px单位html5响应式方案


Posted in HTML / CSS onMarch 08, 2018

移动端h5响应式方案最近这几年用得最多的最多的就是rem方案了。这个需要计算根元素的font-size来实现响应式。

但这种方案也有一个缺点,那就是font-size不为整数的时候一些字体使用rem单位会导致字体显示的大小有问题,对视觉还原要求比较高的项目来说这还是令前端开发挺头疼的一件事的。

解决前端响应式无非就是在不同的设备下可以正常展示,这里介绍一种不需要rem方式的响应式方案。直接使用px,这里说的是基于750px的设计稿。设计稿中你量出来是多少px,样式中

直接写多少px。这样是不是很快捷,也不需要rem换算。

  1. transform
  2. transform-origin

这里其实就是用到了transform的scale缩放页面大小来实现响应式。

核心代码:
 

let screenMatch = () => {
            document.body.style.setProperty('visibility', 'hidden')
            let page = document.getElementById("page");
            let _scale = window.outerWidth/750;
            
            page.style.setProperty("transformOrigin", "0 0");
            page.style.setProperty("transform", "scale("+ _scale + ")");
            //兼容ios8
            page.style.setProperty("-webkit-transform-origin", "0 0");
            page.style.setProperty("-webkit-transfrom", "scale("+ _scale + ")");
            setTimeout(() => {
  
                page.style.setProperty("transformOrigin", "0 0");
                page.style.setProperty("transform", "scale("+ _scale + ")");
                //兼容ios8
                page.style.setProperty("-webkit-transform-origin", "0 0");
                page.style.setProperty("-webkit-transfrom", "scale("+ _scale + ")");
                document.body.style.setProperty('visibility', 'visible')
            }, 100);

        }
        screenMatch();
        window.onresize = screenMatch;

上述代码中id为page的是整个页面元素开始的跟节点,body下的第一个元素。这里body/html要设置min-height:100%;height:100%;

其实我们在小程序中也可以使用px单位,但是小程序中使用transform的时候会有一些字体锯齿的bug,最后换了zoom属性就好了,同时使用-webkit-zoom做兼容。核心代码跟h5的差别不大同样放的是缩放大小。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
html5开发三八女王节表白神器
Mar 07 #HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 #HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 #HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 #HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 #HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 #HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 #HTML / CSS
You might like
第十二节--类的自动加载
2006/11/16 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
$()JS小技巧
2007/07/21 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
js模糊查询实例分享
2016/12/26 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
Python入门篇之文件
2014/10/20 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
浅谈python迭代器
2017/11/08 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
python3实现mysql导出excel的方法
2019/07/31 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
基于python实现操作git过程代码解析
2020/07/27 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
介绍一下grep命令的使用
2015/06/12 面试题
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
工程专业应届生求职信
2014/02/19 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
募捐倡议书
2014/04/14 职场文书
个人承诺书怎么写
2014/05/24 职场文书
高三励志标语
2014/06/05 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
焦裕禄观后感
2015/06/03 职场文书
python自动化八大定位元素讲解
2021/07/09 Python