移动端屏幕自适应js与rem

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="telephone=no" name="format-detection" />
<meta name="format-detection" content="email=no" />
<meta http-equiv="Cache-Control" content="no-cache"/>

html{font-size: 20px;width: 100%;height: 100%;}
body{margin: 0;padding: 0;}

<script>
//orientationchange方向改变事件
(function (doc, win) {
var docEl = doc.documentElement,//根元素html
//判断窗口有没有orientationchange这个方法,有就赋值给一个变量,没有就返回resize方法。
resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//把document的fontSize大小设置成跟窗口成一定比例的大小,从而实现响应式效果。
docEl.style.fontSize = 20 * (clientWidth / 320) + ‘px‘;
};
//alert(docEl)
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三个参数:第一个是事件名称比如点击事件onclick,第二个是要执行的函数,第三个是布尔值
doc.addEventListener(‘DOMContentLoaded‘, recalc, false)//绑定浏览器缩放与加载时间
})(document, window);
//alert(document.documentElement.clientWidth/320)

</script>

时间: 2024-11-07 07:26:45

移动端屏幕自适应js与rem的相关文章

浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应

随着3G的普及,越来越多的人使用手机上网.移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?本篇文章将讲述自适应网页设计的概念和方法,使网页开发人员维护同一个网页代码,即可使网站在多种设备上具有更好的阅读体验.本文详细介绍了自适应网页的实现方法,希望能给迷惑的你带来帮助. 一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,

vue-cli脚手架里如何配置屏幕自适应

很多同学可能在写h5的时候,也会遇到移动端如何控制屏幕自适应问题!在移动端网页开发中,我们可以用手机淘宝的flexible.那么在vue当中,也同样可以用!接下来就介绍下如何在vue-cli配置的项目里来实现屏幕自适应首先,我们需要安装flexible库.npm i lib-flexible --save然后在项目入口文件main.js里引入lib-flexibleimport 'lib-flexible'记得配置meta标签,在index.html文件当中<meta name="view

移动端屏幕的适配

因为对H5较感兴趣,所以没事的时候会看一些文章博客. 废话不多说,先引入问题, 关于移动端屏幕的适配你有没有什么想说的 ?首先 我之前一直使用的就是这种Rem 缩放的方法去做的,content= "width= device-width",initial-scale=1.0,可以实现针对不同屏幕实现缩放效果,并且不出现滚动条, 而在内容部分使用 Rem进行对等比缩放,我们知道Rem 是一个相对长度 单位,它的大小会根据HTML根元素设置的font-size的大小进行换算, 根元素(ht

前端关于移动端屏幕适配

1.先谈一下几个概念 像素是度量的单位,可以理解为点 1.css像素 html中度量的单位 用px来计算,在pc中往往 1 css px = 1 物理像素 在不同设备中1css像素对应不同的设备像素(物理像素) 例如:iphone3分辨率是320*480 即 css 1px = 1个物理像素:iphone4 分辨率640x960但屏幕尺寸没有改变,意味着同一块区域像素多了1倍 即 css 1px =2个物理像素: 2.物理像素 表示每英寸所拥有的像素数目,数值越高,代表屏幕能够以更高的密度来显示

移动端屏幕适配原理以及方法讲解

序言: 今天周日,我正坐在黄埔区图书馆,思索着关于移动端屏幕适配的问题.作为一名年纪轻轻的前端马蓉,不,是码农,移动端屏幕适配的方案的帖子没读过100篇吧,也读过几十篇了.可是今天我又在思考这个问题了,因为下周我有个关于移动端适配的演讲.人生这么短暂,我却把有限的时间奉献到了无限的前端道路上. 根据我不(cong)太(ming)灵(jue)活(ding)的大脑的努力思考.我发现现阶段比较流行移动端适配原理只有一个--就是对元素进行放大和缩小,具体到执行的时候方法有两个(求不打脸). 1个是网页大

HTML5工具做屏幕自适应的两种方法

近一两年,HTML5在中国很火,也出了不少HTML5工具和模板.别的先不说,对于不同的H5工具,解决屏幕自适应问题的区别是什么? 简单来说,感应式设计是当用不同设备访问时,能够根据设备的宽度和高度对设备进行动态的适配.例如,用iPhone4.iPhone5.iPhone6.PC.iPad访问同一个H5网页,都能打开一个适合该设备的一个HTML5页面,不留白边,不变形. 由于设备分辨率和长宽比都不同,如果设计一次就能适应所有的屏幕(包括移动端和PC端),几乎不可能.原因有三: 1. 如果等比例缩放

NGUI学习笔记(三):屏幕自适应

我们开发移动端游戏的时候,一般都会选择Constrained/FixedSize的缩放模式来保证图片在不同的分辨率下相对于屏幕的尺寸保持一致,但是对于屏幕自适应来说,这还是不够的,不同的手机存在不同的高宽比,所以需要引入相对位置的概念. NGUI作为一款成熟的UI插件,为我们提供了成熟的屏幕自适应技术. Anchor组件 我们可以创建一个Anchor组件到舞台,Anchor即锚点,其作用是可以指定为摄像机的9个点(分别是:上左.上.上右.左.中.右.下左.下和下右)为其锚点,当摄像机的尺寸变化(

firemonkey 手机屏幕自适应程序问题

我是新手.在我才学了2个星期的时候,那个白痴老板说什么手机屏幕自适应程序,我当时不能理解呀,觉得用Delphi的布局设计不就行了吗.结果他说:我就是想让控件内容什么的放在小屏幕手机上也不出来.我就说,那用布局layout.结果那个傻x又是画控件关于屏幕的位置,又是记录控件的位置,整了一大套.整个把我给整晕了,新手伤不起啊,我不知道Delphi xe5有一个控件布局叫ScaledLayout,结果捣鼓了很长时间.我在Delphi交流群里说这个功能时,大家都说我想多了.唉 ,没办法自己又把控件布局什

css语法规则屏幕自适应及条目应用优先权

1. !important 提升指定样式条目的应用优先权. div { color: #f00 !important; color: #000;}在上述代码中,IE6及以下浏览器div的文本颜色为#000,!important并没有覆盖后面的规则:其它浏览器下div的文本颜色为#f00 2.可以让屏幕自适应的方法: /* 样式代码导入 样式文件 */ 第一种方式: <link media="screen and (width:800px)" rel="styleshee