移动布局基础(流式布局)

一.视口

视口(viewport) 就是浏览器显示页面内容的屏幕区域。视口可分为布局视口，视觉视口，和理想视口。

1.布局视口：ios android视口分辨率为980px，pc上能显示大多页面，只是元素很小，一般默认可以缩放

2.视觉视口：我们可以缩放来操作视觉视口，但不影响布局视口，布局视口仍保持原来的宽度

3.理想视口

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

二.二倍图

1.1物理像素，物理像素比

• 我们开发的时候1px不是一定等于1个物理像素的
• pc端页面时，1px等于1个物理像素的，但是移动端不尽相同
• 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

1.2 二倍图

• 我们需要一个50 *50像素的图片 直接放到我们inphone8里面会放大2倍 100 *100就会变模糊
• 我们采取的是放一个100 *100图片 然后手动的把这个图片缩小为50 *50像素的
• 所以我们准备的图片比我们实际需要的大小大2倍，这种方式就是二倍图

1.3 多倍图
不同手机的缩放比例不一样

2.1 背景缩放

• background-size: 背景图片宽度，背景图片高度，如果后面只有一个参数，就是宽度，高度会等比列缩放
• background-size: cover 会把父盒子完全覆盖，可能会有出来的一部分
• background-size: contain 等比例拉伸 当宽度或者高度铺满父盒子，就不会拉伸

移动端技术解决方案

CSS3盒子模型

box-sizing: border-box;//css3盒子模型
padding 和 border不会再撑大盒子
移动端多用CSS3盒子模型
不考虑兼容性问题，就用css3盒子模型
div样式中设置样式{box-sizing:border-box;}
padding border不会撑大盒子 同IE盒模型

a链接在手机端出现点击后链接高亮的问题

解决方案：点击后设置高亮颜色为透明
a{
-webkit-tap-highlight-color:transparent;
}

输入框或按钮自定义样式的问题

解决方案：清除默认外观才可以设置自定义样式
input{
-webkit-appearance:none;
}

关于不想长按页面某一元素弹出菜单问题

解决方案:
img,a{
-webkit-touch-callout:none;
}

移动端常见布局

1.单独制作移动端页面(主流)

• 流式布局
• flex弹性布局
• less + rem + 媒体查询布局
• 混合布局

2.响应式页面兼容移动端(其次)

• 媒体查询
• bootstarp

移动端案例(m.jd.com)

1.技术选型

• 方案：单独制作移动端页面
• 技术：流式布局

2.文件夹

• css
• images(ui图，背景图)
• upload(产品图片)
• index.html(首页)

3.样式

• 引入视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

• 引入css3样式

①将normalize.css放入css文件夹中，引入css初始化文件
②引入我们首页的css

①<link rel = "stylesheet" href = "css/normalize.css">
②<link rel = "stylesheet" href = "css/index.css">

4.具体例子

搜索栏做法

左边和右边盒子用定位，中间搜索栏可以不用给宽度，用padding/margine值
导航栏距离上端还有段距离，需要给margine-top: 7px 但是父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷 可以用overflow:hidden 解决外边距塌陷

overflow:hidden的各种作用可以看这篇博客，总结得很好

放大镜二倍精灵图做法

1.在firework里面把精灵图等比例缩放为原来的一半
2.之后根据大小测量坐标
3.注意代码里面background-size也要写成：精灵图原来宽度的一半

超级品牌日做法

大盒子里面宽度设置为100%，三个div小盒子宽度设置为33.33%向左浮动，设置圆角，但是圆角是给div盒子设置的，对图片没有影响，所以我们要设置overflow: hidden把超出的部分隐藏，这样才会显示圆角

图片默认有空白缝隙，取消缝隙，vertical-align: top;