轻松使用px为单位开发移动端页面
研究移动端页面已经有许久了,一直执着于rem来开发,不谈性能怎么样,单从工作效率上看影响了不少,首先要固定设计稿的宽度,一般都是固定在640px,然后在根据根目录的字体大小来计算出每个元素的rem的值,无疑在开发中切图,每个元素都要去计算一边,是不是感觉很麻烦,有没有一种方法,像切PC端页面一样,切了直接写css,不用去计算这么麻烦,答案是肯定有的!好吧,先给大家看一下,我以前用rem来开发的技术文章吧!
好了,废话不多说,进入今天的正题,轻松使用px开发移动端页面!就在前天浏览微信的“天天酷跑”的活动主题的时,发现他全部是采用的px的单位,于是便仔细看了他的核心js代码,猛然一看,恍然大悟!天天酷跑活动页面地址:http://iwan.qq.com/act/kp3dxz/index.htm?&ptag=4_4.5.5.10729_wxf#
上面的具体代码大家可以前往自行研究,下面我把关键性的代码拷贝出来,一看就懂,以后大家只需要直接引入这些js代码就ok了,就不管他设计稿是640、720、750了,直接拿过来直接切,然后修改参数就大功告成了,就完全可以当pc端页面来切了,并且还适应pc端和移动端,万事大吉啊!关键是还适配各个手机,各个分辨率,不用它感觉很浪费,用了它又感觉虚伪地牛逼着,其实也就几行代码的事情,一看就懂只是你没有去深入的往这方面研究罢了!
meta默认设置(其他的meta就根据项目需求定):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
CSS代码:
.wrap{width:320px;margin:0 auto;}//width:320px,可以根据当前设计稿来定,可以是640、750等尺寸
下面一段js代码放入网页头部,例如:设计稿尺寸是640只需要把320全部改成640就ok了:
(function(){
var width = 750, pw = parseInt(window.screen.width), scale = pw / width, ua = navigator.userAgent;
if(/Android (\d+\.\d+)/.test(ua)){
var version = parseFloat(RegExp.$1);
if(version > 2.3){
document.write('<meta name="viewport" content="width=' + width + ',minimum-scale=' + scale + ',maximum-scale=' + scale + ',target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=' + width + ',target-densitydpi=device-dpi">');
}
}else{
document.write('<meta name="viewport" content="width=' + width + ',user-scalable=no,target-densitydpi=device-dpi">');
}
})();
为兼容性考虑,在页面下面加入下面js,其中wrap为包裹结构最外层的ID,wrap给它320的宽度居中就ok了:
if (navigator.appVersion.indexOf('Android') != -1) {
document.addEventListener("DOMContentLoaded",
function(e) {
document.getElementById('wrap').style.zoom = e.target.activeElement.clientWidth / 320;
});
};
轻松使用px为单位开发移动端页面的更多相关文章
- 移动端--用PX为单位+JS框架 实现页面布局
一:大家先下载metahandler.js 二:准备一个用px实现的移动页面(宽度固定死的页面),引入metahandler.js框架 1.视口设置 width=640,是根据psd图来设置,有多宽设 ...
- HTML5+CSS3开发移动端页面
前提知识: 1.能够独立根据设计稿进行整套项目的需求.剖析及其开发: 2.对项目开发流程需要有一个基本的了解: 3.可以灵活运用切图.重构.前端的知识对项目进行灵活控制. 开发步骤之需求分析: 1.确 ...
- 【移动端 Web】怎么循序渐进地开发一个移动端页面
1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...
- 开发LED屏幕页面遇到的问题
上上个礼拜公司的展销会活动需要一个展示在LED大屏幕的页面,顶部显示平台交易总金额,左右两边分别是厂家和买家实时交易记录,具体页面长下面这个样子 需求评审的时候产品说顶部的总金额要有一个数字滚动或者翻 ...
- 移动端页面使用单位的问题:关于px、百分比、em、rem开发中逐渐转换的问题记录
开始写前端页面也有了快两年时间,从一开始的懵逼到现在的淡定,但是不能改变我还是一只小菜鸟的事实,平时遇到的一些问题都会记录在文件夹里,现在都整理一下大家一起分享自己平时也翻翻看看~ 不知道大家平时写的 ...
- 移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签)
移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签) 一.总结 一句话总结: 添加viewport标签:meta name="viewport" ...
- 移动端页面开发适配 rem布局原理
主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...
- 用nodejs把目录下所有用px做单位的css文件转化为用rem做单位的css文件
20171105 1211/星期日 公司为了更好适配手机端,以前用px做单位的css文件,全部需要转化为用rem做单位,目前是1rem=37.5px;开发新项目时,还是用习惯的px写样式代码,完成UI ...
- 【转】Android中dip(dp)与px之间单位转换
Android中dip(dp)与px之间单位转换 dp这个单位可能对web开发的人比较陌生,因为一般都是使用px(像素)但是,现在在开始android应用和游戏后,基本上都转换成用dp作用为单位了,因 ...
随机推荐
- Creating InetAddress object in Java
I am trying to convert an address specified by an IP number or a name, both in String (i.e. localhos ...
- cocos2d-x 2.1.4 使用create_project.py脚本创建项目+ant打包项目
1.创建项目:执行create_project.py脚本,进入Doc界面输入下面的命令: cd D:\cocos2d-x-2.1.4\cocos2d-x-2.1.4\tools\project-cre ...
- UVA 10557 XYZZY
Problem D: XYZZY ADVENT: /ad�vent/, n. The prototypical computer adventure game, first designed by W ...
- jsp中的forward和redirect的区别
转自http://blog.163.com/tsing_hua/blog/static/139622224201101110836644/ 一.调用方式 我们知道,在servlet中调用转发.重定向的 ...
- SecureCRT 无法删除字符
1. 2.
- 常用对象API、附加:集合补充
基本数据类型对象包装类: 为了方便操作基本数据类型值,将其封装成了对象,在对象中定义了属性和行为丰富了该数据的操作. 用于描述该对象的类就称为基本数据类型对象包装类. byte——Byte short ...
- &&与&
if((2>1)&&(4>3))System.out.printf("两边都是true"); else System.out.println(&qu ...
- oracle数据库敏感操作前创建还原点
我们都知道,在vmware虚拟机中有一个拍摄快照的功能,我们可以把系统此时的状态保存下来,一方后面遇到不测事件,也好将系统还原,oracle中也有类似功能. 首先创建一张学生表: 向学生表中插入一条数 ...
- PHP多维数组的魅力
让我们来体验一下多位数组的魅力吧! 多维数组就是一个数组里面包含一个或多个数组,这就是多维数组.下面用多维数组来编写一个小案例(代码在图片下面): <meta http-equiv=" ...
- php字符串函数(1)
下面去学习一下php的字符串函数,那么怎么去看手册呢,举个例子 int strcasecmp ( string $str1 , string $str2 ) 第一个int,表示此函数返回的类型是int ...