一，今天完成的事情

（一）viewport

什么是viewport

简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个viewport的默认值，可能是980px，或者是其他值。就以手机来说吧，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。

viewport是用来干什么的

viewport的默认值，一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。但是，其实我们手机的屏幕宽度是没有960px的，因此浏览器会出现横向滚动条。同时，即使是基于980的viewport，我们在移动端浏览我们的桌面页面的体验其实也并不好，所以，一般的，我们会专门给浏览器设计一个移动端的页面。

对viewport的控制

如今可以绝大部分浏览器里（即主流的安卓浏览器和ios），都支持对viewport的一个控制了。一般的，我们会这么写。

viewport默认有6个属性

width: 设置viewport的宽度（即之前所提及到的，浏览器的宽度详），这里可以为一个整数，又或者是字符串"width-device"

initial-scale: 页面初始的缩放值，为数字，可以是小数

minimum-scale: 允许用户的最小缩放值，为数字，可以是小数

maximum-scale: 允许用户的最大缩放值，为数字，可以是小数

height: 设置viewport的高度（我们一般而言并不能用到）

user-scalable: 是否允许用户进行缩放，'no'为不允许，'yes'为允许

我们把这个标签是在head里面，像这样

<meta name="viewport" content="initial-scale=1">

这样就可以做到对viewport的控制了

（二）position

浮动跟定位是css两大布局。定位布局共有四种方式：

（1）固定定位（fixed）

（2）相对定位（relative）

（3）绝对定位（absolute）

（4）静态定位（static）

（三）使用rem布局

说下rem

rem是根据页面的根元素的font-size的一个相对的单位，即

html{

font-size: 16px;

}

比如当在一个div中，如此写

div{

width: 2rem;

}

那么width，是16*2 = 32px

rem做到适配不同分辨率

这个是现在手机淘宝的移动端的解决方案，即使用rem的特性，来对页面进行布局。

（四）了解HTML表单之input元素的30个元素属性

二，明天的计划

任务四的实现

三，遇到的问题

读万卷书不如行万里路，还是要动手写，看了知识点还是很茫然····

四，收获

通过今天的学习，对移动端的一些布局方式，写法有了初步的了解