移动端开发
关注
分享
扫一扫
xiaxiaoxian
这个作者很懒，什么都没留下…
展开
-
移动端自适应布局之-----rem单位的使用
rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', rec...转载 2018-02-08 20:48:40 · 442 阅读 · 0 评论 -
从设备像素比到移动适配
一.设备像素比(device pixel ratio )视觉稿在前端开发之前，我们会有一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：首先，选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480，现在更多的是iphone6的375×667)。 对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准...转载 2018-02-08 21:31:21 · 608 阅读 · 0 评论 -
移动端事件的收集
window.onload = function () { var box = document.querySelector(".box"); //box.style.background = "blue"; /* touchstart 手指触摸 == mousedown touchend 手指抬起 == mouseup touchmove 手指触屏移动 == mousemo...原创 2018-02-08 22:30:26 · 187 阅读 · 0 评论 -
前端移动端适配总结
meta标签到底做了什么事情做过移动端适配的小伙伴一定有遇到过这行代码：<meta name="viewport" content="width=device-width, initial-scale=1.0">但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。那么，这句话的本质到底是什么呢？不急，我们先往下面看，这里先...转载 2018-02-28 10:28:13 · 55659 阅读 · 8 评论 -
web前端 —— 移动端知识的一些总结
一.css部分1.meta标签<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页 放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面 做了缩小优化，所...转载 2018-03-01 08:55:10 · 683 阅读 · 0 评论 -
rem是如何实现自适应布局的
摘要：rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。rem是什么rem（font size...原创 2018-03-01 11:56:44 · 4648 阅读 · 0 评论