安卓html 750px,移动端750px页面适配

有段时间没写移动端的页面了，这次写到了就顺便来记录一下基本用法，简单的说下750px设计图的移动端适配问题

首先，引入common.js文件

(function(doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function() {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

if (clientWidth >= 750) {

docEl.style.fontSize = '100px';

} else {

docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

}

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);复制代码

更改js中的宽度，如果设计稿是750的就写750，是640的就改为640的，现在大部分是根据iPhone6的宽度来的设计稿，也就是750px的设计图。

我们以100px为单位，这样就可以不用执行减半等换算工作，设计稿给多少值，就用多少值/100，就可以了，比如一个模块的宽度是550px，高度是230px，那么换算成rem就直接往前两个小数点

.box {

width: 5.5rem;

height: 2.3rem;

}复制代码

由于动态的改变根字体大小，使得页面模块可以自适应各个屏幕

当页面的宽度大于750时，html的font-size恒等于100px，如果页面小于750px，页面中的html的font-size就是100 * ( 当前页面宽度/750 )，如下，iphone6的宽度375，对应的字体就是50px，和换算的一样

其次，在头部加入meta内容

复制代码

最后，由于是750的页面，所以最外层的盒子可以限制以下的大小

.wrap {

width: 100%;

max-width: 750px;

min-width: 320px;

margin: 0 auto

}复制代码

接下来就可以安心的根据设计图来写移动端页面啦~

安卓html 750px,移动端750px页面适配相关推荐

教你如何用 lib-flexible 实现移动端H5页面适配
前话好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
移动端Web页面适配方案（整理版）
@(概述)[基本概念|百分比|rem|vw/vh|响应式设计] 移动端web页面的开发,由于手机屏幕尺寸.分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需 ...
移动端 H5页面适配
一.基础概念在了解如何做H5页面适配前,大家都应该把移动端涉及的一些概念搞明白,比如:dpr 是什么意思? 移动端H5解惑-概念术语(一) 二.为什么要做页面适配 2.1 PC端为什么要解决浏览器兼 ...
Android性能优化来龙去脉总结，移动端h5页面适配
6.资源加载导致执行缓慢. 有些时候避免不要加载一些资源,这里有两种解决的办法,使用的场景也不相同. a.预加载,即还没有来到路径之前,就提前加载好,诶,好像x5内核就是酱紫哦. b.实在是要等到用到 ...
移动端页面适配———多方案解析
移动互联网快速发展的今天,手机的种类和尺寸越来越多,作为前端的小伙伴们可能会越来越头疼,但又不得不去适配一款又一款的新机型.对于移动端适配,不同的公司.不同的团队有不同的解决方案.我在项目中也用了一部 ...
移动端H5页面高清多屏适配方案
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
js整体缩小网页_js实现整体缩放页面适配移动端
大家在适配页面的Web端和移动端时候,如果不需要那么麻烦,就可以使用js进行整体缩放,只需要引入一个js,改动htmll头部代码即可切记: 1.该 JS 应在 head 中尽可能早的引入,减少重绘. ...
python四大软件-传智播客解析Python之移动端页面适配四大方式
前端在制作移动端页面时,会碰到适配各种手机屏幕的问题,而且还包括平板电脑,这么多种分辨率的屏幕,如何做到适配呢?传智播客为此总结了四种方式,具体如下: 传智播客解析Python之移动端页面适配四大方式 ...
vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
移动端 H5 分屏页面适配问题--设计稿比例与设备宽高比例不同
移动端 H5 分屏页面适配问题单位问题肯定用rem, 为了方便计算,一般取 1rem=100px(设计稿px), 需要根据设计稿的宽度设置合适的fontSize, 具体可以看这篇文章 :移动端根据 ...

安卓html 750px,移动端750px页面适配

安卓html 750px,移动端750px页面适配相关推荐

最新文章

热门文章