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

时间: 2017-10-19阅读: 2773标签: 响应式

关于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。


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

链接: http://www.fly63.com/article/detial/2

css3响应式布局教程

一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验。在何种设备或者软件上将页面打开;and:连接媒体类型和媒体特性

Vue3.0 响应式数据

重构后的 Vue3.0 和之前在写法上有很大的差别,早前在网络上对于 Vue3.0 这种激进式的重构方式发起了一场讨论,见仁见智。不多说先看看 Vue3.0 在写法上激进到什么程度。

一张图理清 Vue 3.0 的响应式系统

随着 Vue 3.0 Pre Alpha 版本的公布,我们得以一窥其源码的实现。Vue 最巧妙的特性之一是其响应式系统,而我们也能够在仓库的 packages/reactivity 模块下找到对应的实现。虽然源码的代码量不多,网上的分析文章也有一堆

函数式响应式编程 - Functional Reactive Programming

问题: 输入密码时,确认密码还是空的,出现密码不一致错误提示,干扰用户输入。期望: 确认密码没输入过时,不提示错误。为解决这个问题,用 isConfirmPwdTouched 标识确认密码输入框是否输入过内容。

Vue 添加响应式属性

v-model 帮你把数据 set 了,自然一切正常;操作二,@input 先把属性直接静态添加了,到了 v-model 的时候 set 不会再劫持已经存在的属性。这就引出了一个需要注意的地方,若是先直接赋值,即使再用 set 也不能再劫持这个属性了

实现移动端响应式布局

我们选择了 rem 作为像素单位。因为本次开发的项目包含 ipad 与手机端,使用 rem 单位应对的根元素字体可以根据设备动态设置。因此 ipad 端与手机端公共的样式只需要写一套代码就能实现,而使用vw作为单位在无论什么情况

媒体类型和响应式设计

常用的三种为:all,print和screen;媒体类型引用方法:link标签,xml方式,@import和css3新增的@media四种

css媒体查询与响应式

根据一个或多个基于设备类型、具体特点和环境的媒体查询来应用样式。简单来说就是针对不同的媒体类型(比如屏幕、打印机或者屏幕阅读器)定义不同的样式,可以针对不同的屏幕尺寸设置不同的样式

深入响应式原理

说到响应式原理其实就是双向绑定的实现,说到 双向绑定 其实有两个操作,数据变化修改dom,input等文本框修改值的时候修改数据1. 数据变化 -> 修改dom;2. 通过表单修改value -> 修改数据

js+rem动态计算font-size的大小适配各种手机设备

需求:在不同的移动终端设备中实现,UI设计稿的等比例适配。使用js动态改变html的字体大小font-size+rem的特性,来保证最初的设计图中每个元素的尺寸比例不变

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全