适配的js

/** * Created by fanso2o on 2016/9/7. */$(document).ready(function () {    function change() {        var html = document.getElementsByTagName(‘html‘)[0];        html.style.fontSize = 20 / 375 * document.body.clientWidth + ‘px‘;    }    $(window).resize(function () {        change();        $("body").removeClass("ng-hide");    });    $(window).resize();});

<script type="text/javascript">
window.onload = function () {
function change() {
var html = document.getElementsByTagName(‘html‘)[0];
html.style.fontSize = 10 / 375 * window.screen.width + ‘px‘;
};
window.onresize = function () {
change();
};
change();
}
</script>

时间: 2024-10-11 20:30:50

适配的js的相关文章

移动端适配--flexible.js

引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的一种移动端适配方案,用来解决H5开发中的各个机型适配问题,是一种比较成熟的适配方案. 二.使用方法: 在html头部引入flexible.js,最好放在最头部,重构时使用rem替代px像素即可,flexible会做好所有适配.换算关系为1rem对应1/10设计尺寸,如ipone6设计尺寸为750px

移动端rem适配 flex.js

(function() { document.addEventListener('DOMContentLoaded', function () { var html = document.documentElement; var windowWidth = html.clientWidth; html.style.fontSize = windowWidth / 7.5 + 'px'; //等价于html.style.fontSize = windowWidth / 750 * 100 + 'p

移动端网页开发三(纠结适配的那些年)

前面两篇文章介绍了移动端网页开发所要具备的基础知识. 今天着重来讲解移动端的适配方案. 做PC端页面的工程师聊的最多的是兼容,这是因为浏览器之间的差异引起的.而移动端基本是没有兼容问题的,全是css3,简直不要太开心. 但是最明显的是适配问题. 什么是适配呢?做PC页面的时候,我们按照设计图的尺寸来就好,这个侧边栏200px,那个按钮50px.可是,当我们开始做移动端页面的时候,设计师给了一份640px的设计图.那么我们如何把这份设计图实现在各个手机上的过程就是适配. 我所接触过的适配方法,目前

Meteor: 如何复用node.js包或代码

Meteor基于Node.js,但是却有自己的包管理系统(atmosphere)以及代码加载机制,且meteor是非异步的,这些都意味着,node.js包(npm package)和代码通常不能直接用于meteor程序. 这里分享三种方法以在meteor中复用node.js包和代码. meteorhacks:npm + meteorhacks:async npm+async是复用npm包最便捷的方式.meteor程序添加npm包之后,便可以在packages.json中声明包依赖,在程序中通过M

淘宝——移动端页面终端适配

注:本文参考自:http://www.cnblogs.com/xianyulaodi/p/5533201.html 阅读目录 适配的要求 适配的方法,3个步骤 适配中背景图片的处理 适配的原理解析 摘要:在进行移动端界面的书写的时候,如果把宽度高度或者字体大小全部写死的话,那么在所有手机上看到的大小都一样,存在的问题就是同样大小的字体,或者一个盒子模型, 在大屏幕手机上看起来会有点偏小.比如iphone6PLUS.如果是做成适配的话,就很好的解决了这个问题,大屏幕显示的内容大一点,小屏幕显示的小

移动端界面适配

本文引自:http://www.cnblogs.com/xianyulaodi/p/5533201.html 摘要:在进行移动端界面的书写的时候,如果把宽度高度或者字体大小全部写死的话,那么在所有手机上看到的大小都一样,存在的问题就是同样大小的字体,或者一个盒子模型, 在大屏幕手机上看起来会有点偏小.比如iphone6PLUS.如果是做成适配的话,就很好的解决了这个问题,大屏幕显示的内容大一点,小屏幕显示的小一点. 所以今天做一个移动端页面适配的小小总结 适配的要求 1.在不同分辨率的手机上,页

移动端高清屏适配方案

结论: 用户体验要求很高的页面,如UV较高的页面,活动页这些应该以用户体验优先,应用flexiable方案 在其它页面,固定视口,不缩放,使用rem做布局适配,js添加屏幕标识以便调整字体大小(即布局使用rem,字体使用百分比),使用@2x图片,只做ios8+的1px处理 面临的问题: 在不同大小和高清的屏幕下: 如何保证 界面布局 一致性:不错乱,不变形 如何保证 字体大小 一致性:大屏显示更大,小屏显示更小或更多 如何保证 1px边框 一致性:不同的高清屏也在正常显示1px的高度大小 如何保

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

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

js动态计算移动端rem

在做移动端web app的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的media query来实现适配,例如下面这样: 1 html { 2 font-size : 20px; 3 } 4 @media only screen and (min-width: 401px){ 5 html { 6 font-size: 25px !important; 7 } 8 } 9 @media only screen and (min-width: 428px){ 10 html {