详解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 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 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
php的curl封装类用法实例
2014/11/07 PHP
浅谈php提交form表单
2015/07/01 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
vue中使用echarts的示例
2021/01/03 Vue.js
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
keras topN显示,自编写代码案例
2020/07/03 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
函授自我鉴定
2013/11/06 职场文书
护理学专业推荐信
2013/12/03 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
十八大观后感
2015/06/12 职场文书
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL