移动端特点

移动端和PC端网页不同点

PC屏幕大，网页固定版心
手机屏幕小，网页宽度多数为100%

如何在电脑里面边写代码边调试移动端网页效果？

谷歌模拟器

分辨率

屏幕尺寸
1.指的是屏幕对角线的长度，一般用英寸来度量
2.了解移动端主流设备分辨率
PC分辨率
1920 * 1080
1366 * 768
……
1. 缩放150%
2. （1920/150%）*（1080/150%）
总结
1. 硬件分辨率（出厂设置）
2. 缩放调节的分辨率（软件设置）
了解移动端主流设备分辨率
- 分辨率分类
  1. 物理分辨率是生产屏幕时就固定的，它是不可被改变的
  2. 逻辑分辨率是由软件（驱动）决定的
思考：制作网页参考物理分辨率还是逻辑分辨率？
1. 逻辑分辨率

视口

目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页
1.手机屏幕尺寸都不同，网页宽度为100%
2.网页的宽度和逻辑分辨率尺寸相同。
目标：网页宽度和设备宽度(分辨率)相同。
1.解决办法：添加视口标签。
2.视口：显示HTML网页的区域，用来约束HTML尺寸。
viewport：视口
1.width=device-width：视口宽度 = 设备宽度
2.initial-scale=1.0：缩放1倍（不缩放）

百分比布局

目标：能够使用百分比布局开发网页
1.百分比布局，也叫流式布局
2.效果：宽度自适应，高度固定。

 <!DOCTYPE html> 
 <html lang="en"> 
 <head> 
 <meta charset="UTF-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <title>Document</title> 
 <style> 
 * { 
 margin: 0; 
 padding: 0; 
 box-sizing: border-box; 
 } 

 footer { 
 width: 100%; 
 height: 50px;
 /* 固定定位，将 footer 底部元素固定在浏览器的底部 */ 
 position: fixed; 
 left: 0; 
 bottom: 0; 
} 

 footer a { 
/* 转换显示模式，在将 a 标签从行内转为行内块的时候，换行会有默认的间距 */ 
 /* display: inline-block; */ 

 /* 浮动在一行排列是默认没有间距的 */ 
 float: left; 

 width: 20%; 
 height: 50px; 
 } 
  
footer a img { 
width: 100%; 
 } 
</style> 
</head> 
<body> 
<footer> 
<a href="[#](#)">
<img src="[./images/1.png](./images/1.png)" alt=""> 
</a>
 <a href="[#](#)"> 
 <img src="[./images/2.png](./images/2.png)" alt=""> 
 </a> 
 <a href="[#](#)"> 
 <img src="[./images/3.png](./images/3.png)" alt=""> 
 </a> 
 <a href="[#](#)"> 
 <img src="[./images/4.png](./images/4.png)" alt=""> 
 </a> 
 <a href="[#](#)">
 <img src="[./images/5.png](./images/5.png)" alt=""> 
 </a> 
 </footer>
 </body> 
 </html>

Flex布局

目标：能够使用Flex布局模型灵活、快速的开发网页
1.多个盒子横向排列使用什么属性？
浮动
2.设置盒子间的间距使用什么属性？
margin
3.需要注意什么问题？
浮动的盒子脱标

Flex布局/弹性布局：

1.是一种浏览器提倡的布局模型
2.布局网页更简单、灵活
3.避免浮动脱标的问题

flex(弹性布局)与float(浮动布局)的差别

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 3000px;
      }
      /* 浮动盒子区域 */
      .float {
        border: 10px solid tomato;
        overflow: hidden;
      }

      .float div {
        float: left;
        width: 200px;
        height: 200px;
        background-color: #0a0;
        border: 10px solid #ff0;
        font-size: 60px;
        color: #fff;
        font-weight: 700;
        text-align: center;
        line-height: 200px;
      }

      /* 
      弹性盒子区域
      弹性布局相对于浮动布局：
       1.没有需要清除浮动；
       2.布局更加的灵活
        */
      .flex {
        /* 添加弹性布局 df */
        display: flex;
        justify-content: space-between;
        border: 10px solid pink;
      }

      .flex div {
        /* 盒子 */
        width: 200px;
        height: 200px;
        background-color: #0a0;
        border: 10px solid #6cf;
        /* 文字 */
        font-size: 60px;
        color: #fff;
        font-weight: 700;
        text-align: center;
        line-height: 200px;
      }
    </style>
  </head>

  <body>
    <h2>float</h2>
    <div class="float">
      <div>1</div>
      <div style="margin-left: 350px">2</div>
      <div style="float: right">3</div>
    </div>

    <br />

    <h2>flex</h2>
    <div class="flex">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

flex组成

 <!DOCTYPE html>
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<title>flex组成</title> 
<style> 
* { 
  margin: 0; 
  padding: 0; 
 } 
 .box { 
/* 
 添加弹性布局 display:flex; df 
 弹性容器 display:flex;： 
 默认宽度和父元素宽度一样，默认的高度由内容所撑开 
*/ 
 display: flex; 
 width: 1000px; 
 height: 600px; 
 background: orange; 
} 
.box span { 
 /* 
 弹性盒子：弹性容器的最近一级子元素(亲儿子子元素) 
 1.默认的宽度由内容所撑开，默认的高度为父元素的高度(侧轴方向默认是拉伸)；
 2.没有块级，行内，行内块元素之分，统统都是弹性盒子(可以直接设置宽高，一行显示多个)； 
 3.默认不换行，宁愿牺牲自己的宽度，都不会自动换行 
 */ 
 width: 100px;
 height: 100px; 
 color: #fff; 
 font-size: 30px; 
 font-weight: 700; 
 text-align: center; 
 line-height: 100px; 
 background-color: #0a0; 
 border: 1px solid #fff; 
 } 
 a { 
 width: 100px; 
 height: 100px; 
 background-color: purple; 
 } 
 </style> 
 </head> 

 <body> 
 <div class="box"> 
 <div> 
 <a href="[#](#)">看看我的大小</a> 
 </div> 
 <span>1</span> 
 <span>2</span> 
 <span>3</span> 
 <span>4</span> 
 <span>5</span> 
 </div> 
 </body> 
 </html>

Flex布局模型构成

目标：能够使用Flex布局模型灵活、快速的开发网页
1.作用
基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局
2.设置方式
父元素添加 display: flex，子元素可以自动的挤压或拉伸
3.组成部分
弹性容器
弹性盒子
主轴
侧轴 / 交叉轴
4.使用justify-content调节元素在主轴的对齐方式

主轴对齐方式

修改主轴对齐方式属性: justify-content
属性值作用
flex-start 默认值, 起点开始依次排列
flex-end 终点开始依次排列
center 沿主轴居中排列
space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主轴对齐方式</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        /* 添加弹性布局 df */
        /* 
        改变主轴对齐方式 jc
        */
        display: flex;

        /* flex-start 默认值，从父元素的左边开始显示 */
        /* justify-content: flex-start; */

        /* flex-end 让弹性盒子整体，显示在弹性容器的右侧 */
        /* justify-content: flex-end; */

        /* center 让弹性盒子整体，显示在弹性容器的中间 */
        /* justify-content: center; */

        /* space-around 让空白空间环绕在弹性盒子的两侧，第一个和最后一个弹性盒子离弹性容器的距离为弹性盒子与弹性盒子之间的距离的1/2 */
        /* justify-content: space-around; */

        /* space-between 让空白空间分布在弹性盒子与弹性盒子之间---第一个和最后一个弹性盒子离弹性容器的距离为0 */
        /* justify-content: space-between; */

        /* space-evenly 弹性盒子离弹性容器之间的距离与弹性盒子与弹性盒子之间的距离相等 */
        justify-content: space-evenly;
        width: 1000px;
        height: 600px;
        background: orange;
      }

      .box div {
        width: 100px;
        height: 100px;
        color: #fff;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        line-height: 100px;
        background-color: #0a0;
        border: 1px solid #fff;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>

侧轴对齐方式

使用align-items调节元素在侧轴的对齐方式
1.修改侧轴对齐方式属性:
align-items（添加到弹性容器）
align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
属性值作用
flex-start 默认值, 起点开始依次排列
flex-end 终点开始依次排列
center 沿侧轴居中排列
stretch 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器

伸缩比

目标：使用flex属性修改弹性盒子伸缩比
1.属性
flex : 值; l 取值分类
数值(整数)
注意 : 只占用父盒子剩余尺寸

实战案例小兔鲜

HTML首页布局模块
|  | <!DOCTYPE html> |
|  | <html lang="en"> |
|  | <head> |
|  | <meta charset="UTF-8"> |
|  | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|  | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|  | <title>订单</title> |
|  | <!-- 1.引入第三方资源 --> |
|  | <link rel="stylesheet" href="[./lib/iconfont/iconfont.css](./lib/iconfont/iconfont.css)"> |
|  |  |
|  | <!-- 2.引入当前页面css文件 --> |
|  | <!-- a.引入base.css文件 --> |
|  | <link rel="stylesheet" href="[./css/base.css](./css/base.css)"> |
|  |  |
|  | <!-- b.引入当前页面的css文件 --> |
|  | <link rel="stylesheet" href="[./css/order.css](./css/order.css)"> |
|  | </head> |
|  |  |
|  | <body> |
|  | <!-- 用户信息模块 info --> |
|  | <div class="info common"> |
|  | <!-- 地址字体图标 --> |
|  | <i class="iconfont icon-location location"></i> |
|  |  |
|  | <!-- 信息详情 --> |
|  | <div class="details"> |
|  | <p><span>林丽</span> <em>18500667882</em></p> |
|  | <p class="twolines"> |
|  | 北京市 海淀区 中关村软件园 信息科技大厦1号 |
|  | 楼410# |
|  | 北京市 海淀区 中关村软件园 信息科技大厦1号 |
|  | 楼410# |
|  | 北京市 海淀区 中关村软件园 信息科技大厦1号 |
|  | 楼410# |
|  | </p> |
|  | </div> |
|  |  |
|  | <!-- 更多字体图标 --> |
|  | <i class="iconfont icon-more more"></i> |
|  | </div> |
|  |  |
|  | <!-- 商品信息:goods --> |
|  | <div class="goods common"> |
|  | <!-- 商品部分图片模块 --> |
|  | <img src="[./uploads/pic.png](./uploads/pic.png)" alt=""> |
|  |  |
|  | <!-- 商品介绍的整体部分 --> |
|  | <div> |
|  | <!-- 商品标题部分 --> |
|  | <div class="title"> |
|  | <p class="twolines"> |
|  | 康尔贝 非接触式红外体温仪 |
|  | 领券立减30元 婴儿级材质 测温 |
|  | 康尔贝 非接触式红外体温仪 |
|  | 领券立减30元 婴儿级材质 测温 |
|  | 康尔贝 非接触式红外体温仪 |
|  | 领券立减30元 婴儿级材质 测温 |
|  | </p> |
|  | <!-- 数量部分 --> |
|  | <i class="iconfont icon-x"></i> |
|  | <span>1</span> |
|  | </div> |
|  |  |
|  | <!-- 商品的样式：tags --> |
|  | <p class="tags">粉色 红外体温计</p> |
|  |  |
|  | <!-- 价格部分：price --> |
|  | <div class="price"> |
|  | <span><em>￥</em>266</span> |
|  | <del><em>￥</em>299</del> |
|  | </div> |
|  | </div> |
|  | </div> |
|  |  |
|  | <!-- 卡片信息模块 --> |
|  | <div class="card common"> |
|  | <ul> |
|  | <li> |
|  | <p>配送方式</p> |
|  | <p>顺丰快递</p> |
|  | </li> |
|  | <li class="message"> |
|  | <p>买家备注</p> |
|  | <p class="notes">希望可以尽快发货，谢谢~</p> |
|  | </li> |
|  | <li> |
|  | <p>支付方式</p> |
|  | <p>支付宝<i class="iconfont icon-more"></i></p> |
|  | </li> |
|  | </ul> |
|  | </div> |
|  |  |
|  | <div class="card common"> |
|  | <ul> |
|  | <li> |
|  | <p>商品总价</p> |
|  | <p>￥299.00</p> |
|  | </li> |
|  | <li> |
|  | <p>运费</p> |
|  | <p>￥0.00</p> |
|  | </li> |
|  | <li> |
|  | <p>折扣</p> |
|  | <p class="money">-￥30.00</p> |
|  | </li> |
|  | </ul> |
|  | </div> |
|  |  |
|  | <div class="card common"> |
|  | <ul> |
|  | <li> |
|  | <p>商品总价</p> |
|  | <p>￥299.00</p> |
|  | </li> |
|  | <li> |
|  | <p>运费</p> |
|  | <p>￥0.00</p> |
|  | </li> |
|  | <li> |
|  | <p>折扣</p> |
|  | <p class="money">-￥30.00</p> |
|  | </li> |
|  | </ul> |
|  | </div> |
|  |  |
|  | <div class="card common"> |
|  | <ul> |
|  | <li> |
|  | <p>商品总价</p> |
|  | <p>￥299.00</p> |
|  | </li> |
|  | <li> |
|  | <p>运费</p> |
|  | <p>￥0.00</p> |
|  | </li> |
|  | <li> |
|  | <p>折扣</p> |
|  | <p class="money">-￥30.00</p> |
|  | </li> |
|  | </ul> |
|  | </div> |
|  |  |
|  | <div class="card common"> |
|  | <ul> |
|  | <li> |
|  | <p>商品总价</p> |
|  | <p>￥299.00</p> |
|  | </li> |
|  | <li> |
|  | <p>运费</p> |
|  | <p>￥0.00</p> |
|  | </li> |
|  | <li> |
|  | <p>折扣</p> |
|  | <p class="money">-￥30.00</p> |
|  | </li> |
|  | </ul> |
|  | </div> |
|  |  |
|  | <div class="card common"> |
|  | <ul> |
|  | <li> |
|  | <p>商品总价</p> |
|  | <p>￥299.00</p> |
|  | </li> |
|  | <li> |
|  | <p>运费</p> |
|  | <p>￥0.00</p> |
|  | </li> |
|  | <li> |
|  | <p>折扣</p> |
|  | <p class="money">-￥30.00</p> |
|  | </li> |
|  | </ul> |
|  | </div> |
|  |  |
|  | <footer> |
|  | <div class="base"> |
|  | <em>合计：</em> |
|  | <em>￥</em> |
|  | <em>266</em> |
|  | <em>.00</em> |
|  | </div> |
|  |  |
|  | <a href="[#](#)">去支付</a> |
|  | </footer> |
|  | </body> |
|  | </html> |

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,907评论 6赞 506
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,987评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,298评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,586评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,633评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,488评论 1赞 302
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,275评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,176评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,619评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,819评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,932评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,655评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,265评论 3赞 329
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,871评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,994评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,095评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,884评论 2赞 354

移动端特点

移动端和PC端网页不同点

如何在电脑里面边写代码边调试移动端网页效果？

分辨率

视口

百分比布局

Flex布局

Flex布局/弹性布局：

flex(弹性布局)与float(浮动布局)的差别

flex组成

Flex布局模型构成

主轴对齐方式

侧轴对齐方式

伸缩比

实战案例小兔鲜

推荐阅读更多精彩内容