移动端web app要使用rem实现自适应布局:font-size的响应式

时间: 2017-10-19阅读: 1593标签: 移动端

关于webAPP的开发最主要解决的就是“自适应自适应布局”。常规的适配有很多做法,例如:流式布局、限死宽度等,但是这些方案都不是最佳的解决方法​,而最满足设计需要的是:

元素可以根据屏幕大小而等比列变化,达到最佳的视觉效果。所以我们采用rem来实现自适应,由于rem是通过html根元素进行适配的,设置html的font-size字体大小就可以控制rem的大小,下面讲解如何来实现:

head设置viewport  
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
1.通过css3媒体查询设置font-size
html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}
2.通过js设置font-size
<script>
!function (window) { //来源:http://www.ydui.org/flexible
    var dw = 750,
    	d = window.document,
        docEl = d.documentElement,
        re = 'orientationchange' in window ? 'orientationchange' : 'resize';
    var recalc = (function refreshRem () {
        var clientWidth = docEl.getBoundingClientRect().width;
        docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / dw), 11.2), 8.55) * 5 + 'px';
        /*说明: 8.55:小于320px不再缩小,11.2:大于420px不再放大, 17.067 :大于640px不再放大*/
        return refreshRem;
    })();
    docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);/* 添加倍屏标识,安卓为1 */
    if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
        d.documentElement.classList.add('ios'); /* 添加IOS标识 */
        if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8) /* IOS8以上给html添加hairline样式,以便特殊处理 */
            d.documentElement.classList.add('hairline');
    }
    if (!d.addEventListener) return;
    window.addEventListener(re, recalc, false);
    d.addEventListener('DOMContentLoaded', recalc, false);
}(window);
</script>


该方法以设计图尺寸750px为基准。100px替换单位为0.1rem。


手淘H5移动端适配方案flexible源码分析

随着技术的飞速发展,当前lib-flexible适配方案也在逐渐被更新的适配方案所替代,但是截止目前为止,还没有发现哪种方案能完全满足适配各种机型的需要,也会有一些小的问题。lib-flexible是目前用到的比较成熟的适配方案

移动web开发之视口viewport_浅谈移动端中的视口

在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度。而移动端则较为复杂,它涉及到三个视口:布局视口(Layout Viewport)、视觉视口(Visual Viewport)和理想视口(Ideal Viewport)

移动端300ms延迟的解决方法

移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果。

阻止移动端浏览器点击图片会预览的几种方法

在移动端部分浏览器中点击了图片,变成了查看图片的效果,怎么防止img的图片被手机浏览器的图片查看器打开呢?下面整理了一些方法来实现:在img元素上添加 onclick=return false、背景图的方式插入、使用js事件阻止默认行为的方式

js实现移动端微信禁止字体被放大或缩小,防止排版错乱

由于微信webvie内置了调整字体大小的功能,如果用户调整了这一设置,就会导致了网页中的字体比原本的尺寸偏大或偏小,使得网页可能出现排版错乱,或者字体太小看不清的情况发生

移动端开发注意问题

这篇文章主要总结移动端页面开发时需要注意的一些问题。比如:防止手机中网页放大和缩小、format-detection设置、上下拉动滚动条时卡顿慢 、禁止复制选中文本...

解决移动端点击穿透问题_h5实现移动端点击事件穿透的多种解决方案

移动端点透现象的解决办法:解决方案一:来得很直接github上有个fastclick可以完美解决;解决方案二:用touchend代替tap事件并阻止掉时A元素touchend的默认行为preventDefault(),从而阻止click事件的产生;解决方案三:延迟一定的时间(300ms+)来处理事件...

再聊移动端页面的适配

因为对于一枚前端而言,天天和页面打交道(H5页面),那么布局的活总是少不了,这也将面临不同终端的适配问题。不知道你是否和我一样,页面布局总是或多或少会有一些蛋疼的事情发生。

移动端如何强制页面横屏

有些机型有些app不能横屏:比如Android的微信就没有横屏模式,而ios的微信能开启横屏模式。解决办法就是在竖屏模式下,写一个横屏的div,然后设置rotate正(负)90度,把他旋转过来;而且如果用户切到横屏时,需要把rotate复原,要求也能正常展现。