一.今日学习内容：
视口和多倍图
视口概念：视口就是浏览器显示页面内容的屏幕区域，视口可以分为：布局视口，视觉视口和理想视口。
理想视口：为了使网站在移动端有罪理想的浏览和阅读宽度而设定的，对于设备来说，理想视口是最理想的视口尺寸
需要手动来添加<meta>标签来进行视口的设置
meta视口标签的目的：布局视口的宽度和理想视口的宽度一致，简单来说就是设备有多宽，我们的布局的视口就有多宽。
视觉视口：是指用户正在看到的网站的区域，注意：是正在看到的网站区域，我们是可以通过缩放去操作视距视口里面能看到的内容的，但是不会影响布局视口，布局视口任然采用的是原来的宽度。
布局视口：一般移动设备的浏览器都默认设置了一个布局视口，用于解决早起的pc端页面在手机上显示的问题，ios和Android一般都是将这个视口设置为980px，所以pc端页面大多都能在手机上呈现，但是元素会看上去很小，一般都是可以通过手机进行网页的缩放。
meta标签
name=“viewport”声明设置视口的meta标签
width宽度设置的是viewport的宽度，设置为device-width特殊值时，就是让页面宽度和设备宽度保存一致
initial-scale初始缩放比，可以设置成大于0的数字，一般我们会将其设置为1.0代表初始缩放比是1（没有缩放）
maximum-scale 最大的缩放比例，可以设置成大于0的数字，一般我们会将其设置为1.0代表最大缩放比例为1
minimum-scale最小的缩放比，可以设置成大于0的数字，一般我们会将其设置为1.0，代表最小缩放比例为1
user-scalable 是允许用户进行缩放，值可以设置为yes或者no（1或0）
物理像素和物理像素比
物理像素指的是屏幕的最小颗粒，是真实的物理存在，在设备出厂的时候就设置好，比如苹果6的750*1334
我们开发时候的1px的像素单位不一定是等于一个物理像素
一个px的能显示的物理像素点的个数，就叫做物理像素比或者屏幕像素比
多倍图
对于一张50px*50px的图片在移动端打开，按照刚才的物理像素比会进行图片的放大，这样会造成图片模糊的结果
通常我们使用多倍图时，需要关注物理像素比，物理像素比是多少就使用相应的倍数来对图片进行缩放，比如iPhone6的物理像素比是2，那么我们会将图片缩小俩被后放到移动端展示
二倍精灵图的使用
将图片缩小2倍后进行背景图片插入，然后在缩小后的图片上进行像素值的测量
移动端开发的选择和技术方案
移动端的主流方案
单独制作移动端网页（主流）
通常情况想，移动端的网址前面都是m开头的
当我们使用移动端来打开网页的时候，页面会自动识别我们的移动设备来匹配相应的移动端网页。
pc端是一套单独的网页，移动端是另一套单独的网页。
响应式的方式来制作网页
pc端和移动端共用一套网站，在不同的屏幕下进行不同样式匹配。
浏览器的兼容问题
移动端的浏览器基本都是以webkit内核为主，我们主要考虑webkit兼容性即可
移动端里面我们可以放心的去使用html5和css3的样式
同时我们的浏览器的私有前缀只需要考虑添加webkit即可
移动端的公共样式
使用normalize来进行移动端样式的初始化
下载完毕后将代码粘贴到新建的normalize.css文件中即可
移动端的常见布局
1.移动端单独制作（主流）
流式布局（百分比布局）
flex弹性布局（强烈推荐的布局技术）
less+rem+媒体查询进行布局
混合布局
2.响应式（次要布局方式）
媒体查询
bootstrap响应式框架
流式布局就是百分比布局，也叫做非固定像素布局
Flex布局
传统布局和flex布局对比
flex的布局原理
flex布局父项常见属性
flex布局子项常见属性
携程网首页案例制作
技术选型：
方案：单独制作移动端页面的方案
技术：flex布局
|
