移动端&&雪碧图

viewport 视口

一般放在head元素内
在做移动端项目和响应式项目时，需要加上viewport这句话
响应式项目:PC端和移动端公用一套项目，一个域名

HTML页面的宽度等于设备的宽度
<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

name="viewport" 视口
width=device-width HTML页面的宽度等于设备的宽度
user-scalable=no 是否允许用户缩放HTML页面，默认值Yes
initial-scale=1.0 定义初始缩放比例
maximum-scale=1.0 定义最大缩放比例
minimum-scale=1.0 定义最小缩放比例

媒体查询

在做响应式布局时，PC端的CSS样式在最前面写，移动端(媒体查询)的CSS样式在PC端(css代码)最下面。
如果想让媒体查询的CSS代码生效，必须移动端的CSS选择器的权重比PC端选择器权重要大(或者权重相等)

移动端没有版心之说，只有PC端有版心

@media screen and (max-width:700px){}
    1. @media 媒体、媒介
    2. 媒体类型
        all 所有类型
        screen 设备类型
    3. 连接符 and
    4. 判断条件 ()
        max-width:700px 最大的宽度为700px 小于等于700px
        min-width:700px 最小的宽度为700px 大于等于700px
    5. {} css代码

响应式布局要适配哪些手机机型？
iphone5/5s 320
iphone6/6s 375
iphone6Plus 414

媒体查询中有两个条件时，用and连接符进行连接

@media all and (min-width:320px) and (max-width:375px){}

做响应式项目步骤有哪些？

• 先新建html页面，加上viewport这句话
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  • HTML页面的宽度等于设备的宽度，如果不加，html宽度是980px
• 写HTML结构(PC端怎么写还怎么写)
• 写CSS样式
  • reset.css 清除默认样式表
  • index.css 写自己的样式表
    • PC端CSS样式在最前面，移动端的CSS样式在最后面(用媒体查询来实现的)
      • 移动端的CSS样式放在媒体查询内
        • @media all and (max-width:700px){}
        • 媒体查询中的判断条件必须给一个范围值(因为范围值包括320/375/414)

产品形态

• PC端和移动端是分离的，两套项目，两个域名
  • 结构复杂，内容多
  • PC端：display+float+position...+ px像素(版心main)
  • 移动端：
  • 怎么区别是否是PC还是移动端项目，看域名开头就可以，以m/i为开头的是移动端项目
• PC端和移动端是公用一套项目，一个域名(响应式布局)
  • 结构简单，内容少
  • 响应式项目：百分比布局(流式布局) + px像素 + 媒体查询

REM布局

rem = root element 根元素
rem为了获取根元素(html)的font-size值

参照iphone5/5s 分辨率 320

参照iphone5/5s 分辨率：320
@media all and (min-width:320px){
    html{
        font-size:100px;
    }
}

iphone6/6s 分辨率：375
@media all and (min-width:375px){
    html{
        font-size: 117.1875px;
    }
}

iphone6Plus 分辨率：414
@media all and (min-width:414px){
    html{
        font-size: 129.375px;
    }
}

参照iphone6/6s 分辨率 375

参照iphone6/6s 分辨率：375
@media all and (min-width:375px){
html{
    font-size:100px;
}

iphone5/5s 分辨率：320
@media all and (min-width:320px){
    html{
        font-size: 85.33px;
    }
}

iphone6Plus 分辨率：414
@media all and (min-width:414px){
    html{
        font-size: 110.4px;
    }
}

移动端设计稿的尺寸

• iphone5/5s 320*2 设计稿尺寸：640
• iphone6/6s 375*2 设计稿尺寸：750
• iphone6Plus 414*3 设计稿尺寸：1242

DPR device-pixel-ratio

设备像素比
device 设备
pixel 像素
ratio 比例

• iphone5/5s DPR:2.0
• iphone6/6s DPR:2.0
• iphone6Plus DPR:3.0

REM布局 最终版

参照iphone5/5s 3202 设计稿：640*

/* 320 */
html{
    font-size: 50px;
}
/* 375 */
@media all and (min-width:375px){
    html{
        font-size: 58.59375px;
    }
}
/* 414 */
@media all and (min-width:414px){
    html{
        font-size: 64.6875px;
    }
}

参照iphone6/6s 3752 设计稿：750*

/* 375 */
html{
    font-size: 50px;
}
/* 320 */
@media all and (min-width:320px){
    html{
        font-size: 42.665px;
    }
}
/* 414 */
@media all and (min-width:414px){
    html{
        font-size: 55.2px;
    }
}

雪碧图

一个图片上有多个小图标，叫做雪碧图
PC端使用雪碧图的技巧

• 设置宽高
• 引入背景图片以及背景图片不平铺
  • background: url(wap/images/icon.png) no-repeat;
• 改变背景图片的位置，值为负数
  • background-position: -47px -149px;

.div1{
    width:100px;
    height: 100px;
    border:2px solid green;
    background: url(wap/images/icon.png) no-repeat;
    background-position: -47px -149px;
}

移动端使用雪碧图的技巧

• 设置宽高
• 引入背景图片以及背景图片不平铺
  • background: url(wap/images/icon.png) no-repeat;
• 改变背景图片的位置
  • background-position: -.47rem -1.49rem;
• 设置背景图片的大小，值为正数(值是雪碧图的大小)
  • background-size:2.58rem 1.96rem;

.box{
    width:1rem;
    height: 1rem;
    border:.03rem solid red;
    background: url(wap/images/icon.png) no-repeat;
    background-position: -.47rem -1.49rem;
    background-size:2.58rem 1.96rem;
}