本文介绍了移动端适配的3种方法，以及移动端图片模糊问题和1px细线问题的解决方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。 >>>>物理像素、设备独立像素和设备像素比 在CSS中我们一般使用px作为单位，需要注意的是，CSS样式里面的px和 ...
分类：
移动开发 时间：
2018-04-06 23:48:56
阅读次数：
620
概念理解 viewport视口 visual viewport 可见视口，设备屏幕的宽度 windw.innerWidth/Height layout viewport 布局视口，DOM宽度 document.documentElement.cliendWidth/Heig ideal viewpo ...
分类：
移动开发 时间：
2018-04-01 10:39:31
阅读次数：
223
引言： H5适配一直是一个比较普遍的问题，很多文章都会讲，最近开发了一个H5的项目使用了一下淘宝的 flexible.js，写一篇文章自己总结一下。 一、背景介绍： Flexible.js是淘宝公开的一种移动端适配方案，用来解决H5开发中的各个机型适配问题，是一种比较成熟的适配方案。 二、使用方法： ...
分类：
移动开发 时间：
2018-03-31 20:38:48
阅读次数：
582
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取 ...
分类：
移动开发 时间：
2018-02-08 00:21:54
阅读次数：
257
背景 视觉稿 在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。 对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 问题： 带着问题，往下看... 一些概念 在进行具体的分析之前，首先得知道下面这些关键性基本概念(术语)。 一个物理像素是显示器(手机屏幕)上最 ...
分类：
移动开发 时间：
2018-01-19 21:29:06
阅读次数：
298
需求： 在不同的移动终端设备中实现，UI设计稿的等比例适配。 方案： 布局排版都用rem做单位，然后不同宽度的屏，js动态计算根节点的font-size。 假设设计稿是宽750px来做的，书写css方便计算考虑，根节点的font-size假定为100px，得出设备宽为7.5rem。设计稿中标注的任何 ...
分类：
移动开发 时间：
2018-01-18 00:56:36
阅读次数：
168
移动端适配方案非常多，入行两年来始终没有一直使用一个标准，每个项目都按照业务需求来做适配 方案一： 最初听李彦辉老师的课程使用rem 布局了一段时间，但是字体计算比较麻烦，也不太精确 方案二： 偶然在Q群里一群友分享的 动态改变根节点字体的方案布局，头部引用一个js。按照设计图的像素写rem，100 ...
分类：
移动开发 时间：
2018-01-03 16:08:13
阅读次数：
159
一、关于布局方案 当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单，关键在于对不同设备的适配。之前介绍了一篇关于移动端rem布局方案，这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更 ...
分类：
移动开发 时间：
2017-12-31 00:38:33
阅读次数：
298
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。 对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 1、首先，选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480 ...
分类：
移动开发 时间：
2017-12-30 18:19:47
阅读次数：
264
此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案，该方案适用于基于原生开发的Unity2D游戏，即没有使用第三方2D插件，如Uni2D,2D toolkit等开发的游戏，NGUI插件不受这个方案影响，可以完美和此方案配合使用。 正式开始的分割线 先说明一些基本的概念： 1.屏幕的宽高比As ...
分类：
编程语言 时间：
2017-11-18 11:23:23
阅读次数：
171
