移动端开发基础

移动端开发

M站上，或者我们可以叫做webapp，其实就是运行在移动端浏览器中的web网站

app:application应用程序。手机软件:主要指安装在智能手机上的软件，完善原始系统的不足与个性化。

PC端肯定是有很大不同的，所以我们需要学习如何在移动设备上开发完美适配的app

移动端布局适配

PC设备大有不同，所以从布局、适配等方面都需要我们考虑到

Viewport视口的作用

pc网站），查看全部内容需要通过滚动条

viewport的一个东西

viewport中，然后viewport在等比缩放到浏览器的宽度，放入浏览器，viewport在缩放的过程中，网页内容也被缩小了

viewport的宽度和浏览器宽度不一样，如果我们能将其设置为一样的话，不会出现这样的问题了

meta标签来设置viewport将其设置为浏览器的宽度，也就是设备的宽度，这样的话布局就会简单多了

viewport的宽度

980的时候，宽度就是980，当浏览器尺寸宽度大于980的时候，宽度和浏览器宽度一致

通过meta标签来设置viewport

HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

meta标签大全

meta viewport 的6个属性：

width	值
initial-scale	设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
minimum-scale	设置页面的初始缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

移动端布局方式与设计图

移动端布局

PC的屏幕有一个很大的区别，移动端是视网膜高清屏（Retina）

retina屏幕有一个属性叫DPR（设备像素缩放比） = 物理像素/逻辑像素

iphone 5s手机商宣传手机的尺寸是：640宽，这个值就是物理像素，而从开发者眼里我们所指的其实是320px（逻辑像素）

dpr为2的手机中，我们的一个逻辑像素会从横纵两个方向分别以2个像素点来渲染

dpr的话，其实我们布局依然可以，因为我们设置一个像素宽高的东西的话，在手机上看见的基本也就是这么大，至于手机设备用多少个物理像素去渲染，大小还是不会变化的

2倍的，是因为，在页面中除了字体（矢量图）大部分都是位图，也就是如果一个像素宽高的盒子里准备放入图片，如果图片的尺寸也是一个像素宽高的话，因为其实在移动端渲染的时候是用四个像素来渲染，图片会失真，但是如果我们给一像素宽高的盒子放入2像素宽高的图片的话，不就失真

布局单位

1.

rem与适配

%有缺陷，vwvh兼容性差，弹性盒所针对的是元素排列的问题，只适用于某种情况，所以我们就想，能给我一个没啥上面的缺陷的单位，想到了rem

rem的兼容性好一点，它也确实是一个布局单位，不受父子元素的影响，设置了rem之后，也不会对px、em等单位造成影响，它是一个理想的单位

rem也有一个致命的问题，就是它不是一个自适应的单位，不会跟着设备尺寸不同而不同，但是没有关系，我们有万能的js，可以去动态的设置它

方法1：

1rem设置成屏幕的某一个比例，比如将1rem设置成屏幕的十分之一

640宽的，我们拿到之后量了一下a的宽度为480px，得到比例a所占屏幕3/4，根据rem与屏幕的关系，最后设置成7.5rem

方法2：

640的图，这个时候我们知道它是照着i5来的，我们现在假设世界上所有的手机都是320的，也就是每一个人用的都是i5，在这个理想的情况下，因为手机都一样，尺寸都一样，和pc端的固定布局也就一样了

640的图上我们量得的宽度是320，因为是二倍图，所以我们知道，它的实际宽度是160px，这样的话，我们直接给这个设置设置width：160px就可以了，这个时候，我们玩个花子，不要单纯的使用px来设置，用rem来设置，例如，我可以将rem设置为100px，这样的，刚才的盒子设置为width：1.6rem，算法就是 量的宽度/(dpr*100) = 要设置的rem值

2，再小数点推两位，设置就性了，但是我们也知道，手机的尺寸并不可能都是320，这样的话，没有关系，我们可以根据一个比例来算rem到底设置为多少

320的时候，我们设置的1rem=100px，所以有一个比例 b = 100/320

W宽度的手机上，1rem应该是多少呢？设为x 那么x/w = b

x = w/3.2

html的fontsize为100了。而是用js去设置：

document.documentElement.style.fontSize = document.documentElement.clientWidth/3.2 + 'px'

rem

方法3：

640的，我们知道设计的依据屏幕依然是320，假设所有的手机都是320的

div量得320，我们知道它的实际宽度是160，所以我们在css里直接设置160px。布局就很简单了，因为量多少，除以2就可以直接设置了

viewport里的，页面的宽度就是viewport的宽度，我们在前面的方法会会将viewport通过meta标签设置为手机屏幕的宽度，但是现在我们就将viewport的宽度强行设置为320px，那么我们页面就会认为它的屏幕宽度就是320px，如果是在屏幕宽度不等于320的手机里，viewport也会进行缩放，缩放到手机屏幕大小，但是这个时候，页面依然认为手机屏幕是320的，也就是说，布局使用固定布局，自适应由viewport去做了，让它将咱们320的页面缩放到不同尺寸的移动设计，达到表现一致.

543627393 学习哦！