移动端h5响应式方案最近这几年用得最多的最多的就是rem方案了。这个需要计算根元素的font-size来实现响应式。
但这种方案也有一个缺点,那就是font-size不为整数的时候一些字体使用rem单位会导致字体显示的大小有问题,对视觉还原要求比较高的项目来说这还是令前端开发挺头疼的一件事的。
解决前端响应式无非就是在不同的设备下可以正常展示,这里介绍一种不需要rem方式的响应式方案。直接使用px,这里说的是基于750px的设计稿。设计稿中你量出来是多少px,样式中
直接写多少px。这样是不是很快捷,也不需要rem换算。
这里其实就是用到了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的差别不大同样放的是缩放大小。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
一、虽然有的属性是boolean类型,但仍旧建议按照XHTML书写(属性名=属性值)格式...
折叠式卡片布局在PC版网站中可能不常见,但是在手机版,小屏幕的网页浏览会大发...
背景 在公司参与一个原生APP和h5混合开发的项目,本人在项目中负责h5部分,现将...
1.先瞧瞧效果: 2.代码是这样的: img src=images/circle.png alt= id=circle/@m...
1、纯工具操作步骤,懂代码更容易 划线就是不符合国人的审美观念,看着就别扭,...
作者:Joe Seifi 译者:前端小智 移动: https://mp.weixin.qq.com/s/p5... 有梦...
简介: 6月4日,以“开启分布式云新时代”为主题2021云边协同大会在北京举行,本...
本文没有咬文嚼字的地方,只是一个配色技巧的分享,十分简单,简单到流泪,但或...
在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之...
前言 Canvas绘制多变形非常简单,只要懂得Canvas路径 + 简单的初中数学知识即可...