移动端视口设置

  1. <!--移动端视口设置 初始化大小 和 禁止缩放
  2. Width属性，用来设置视口的宽度 device-width特殊值 定义输出设备的屏幕可见宽度
  3. initial-scale 初识缩放比
  4. maximum-scale 最大缩放比
  5. minimum-scale 最小缩放比
  6. user-scalable 用户是否可以进行缩放-->
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

css3盒模型

  1. /*CSS3盒子模型 CSS3盒子模型： 盒子的宽度 = CSS中设置的宽度width 里面包含了 border 和 padding*/
  2. box-sizing: border-box;
  3. /*传统盒子模型 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding */
  4. box-sizing: content-box;
  6. /*常规用的特殊样式*/
  7. /*点击高亮我们需要清除清除 设置为transparent 完成透明*/
  8.   -webkit-tap-highlight-color: transparent;
  9. /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
  10. -webkit-appearance: none;
  11. /*禁用长按页面时的弹出菜单*/
  12. img,a { -webkit-touch-callout: none; }

单独制作移动端页面

流式布局

流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局中通过max-width和min-width设置宽度最大宽度和最新宽度
max-width 最大宽度 (max-height 最大高度)
min-width 最小宽度 (min-height 最小高度)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  7.     <title>流式布局</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             list-style: none;
  13.             text-decoration: none;
  14.         }
  15.         body{
  16.             width: 100%;
  17.             min-width: 320px;
  18.             max-width: 640px;
  19.             margin: 0 auto;
  20.             box-sizing: border-box;
  22.         }
  23.         #app{
  24.             height: 45px;
  25.         }
  26.         #app ul li{
  27.             float: left;
  28.             height: 45px;
  29.             background: #333;
  30.         }
  31.         #app li:nth-child(1){
  32.             width: 8%;
  33.         }
  34.         #app li:nth-child(2){
  35.             width: 10%;
  36.         }
  37.         #app li:nth-child(3){
  38.             width: 57%;
  39.         }
  40.         #app li:nth-child(4){
  41.             width: 25%;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46. <div id="app">
  47. <ul>
  48.     <li>8</li>
  49.     <li>10</li>
  50.     <li>57</li>
  51.     <li>25</li>
  52. </ul>
  53. </div>
  54. </body>
  55. </html>

flex弹性布局

flex意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
通过对父元素设置display:flex将父元素设置为弹性布局

父项常见属性

  1. flex-direction：设置主轴的方向
  2. justify-content：设置主轴上的子元素排列方式
  3. flex-wrap：设置子元素是否换行  
  4. align-items：设置侧轴上的子元素排列方式（单行）
  5. align-content：设置侧轴上的子元素的排列方式（多行）
  6. flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

flex-direction

属性值 设置主轴的方向 含义
row 默认从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

justify-content

属性值 设置主轴上的子元素排列方式 含义
flex-start 默认值 从头部开始 如果主轴是X轴 则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐
space-around 平分剩余空间
space-between 先两边贴边 在平分剩余空间

flex-wrap

属性值 设置子元素是否换行 含义
nowrap 默认值 不换行(如果装不开会缩小子元素的宽度)
wrap 换行

align-items

属性值 设置侧轴上的子元素排列方式(单行) 含义
flex-start 从侧轴头开始
flex-end 从侧轴尾部开始排列
center 侧轴居中显示
stretch 拉伸

align-content

属性值 设置侧轴上的子元素排列方式(多行) 含义
flex-start 从侧轴的头部开始排列
flex-end 从侧轴的尾部开始排列
center 在侧轴居中对齐
space-around 平分侧轴的剩余空间
space-between 先两边贴边 在平分剩余侧轴的空间

子项常见属性

属性 值 含义
flex 默认值为0 可以通过整数进行设置 也可写百分比 分配剩余空间用flex来表示占多少份数
align-self 与align-items属性值相同 子项自己在侧轴上的位置可以覆盖父项设计
order 默认值为0 可以通过整数进行设置 设置子项的排列位置 越小越靠前

flex布局中图片在上文字在下布局思路

默认主轴是X轴—-通过flex-direction:colum将主轴设为Y轴—-通过juesity-content:center居中对齐

实现代码

  1. <style>
  2. .local-nav {
  3.             height: 64px;
  4.             background: #fff;
  5.             border-radius: 8px;
  6.             margin: 3px 4px;
  7.             /*对ul设置flex布局 让下面的li进行横向排列*/
  8.             display: flex;
  9.         }
  10.         .local-nav li {
  11.             /*让li平分ul剩余宽度*/
  12.             flex: 1;
  13.             padding: 0;
  14.             margin: 0;
  15.         }
  16.         .local-nav li a {
  17.             /*将li中的a标签设置成flex 将主轴设为Y 实现上图下字效果*/
  18.             display: flex;
  19.             flex-direction: column;
  20.             /*设置侧轴 也就是X轴居中 就是让图片居中*/
  21.             align-items: center;
  22.         }
  23.         .local-nav-icon {
  24.             width: 32px;
  25.             height: 32px;
  26.             background: #42b983;
  27.             margin-top: 8px;
  28.             background: url("./images/localnav_bg.png") no-repeat 0 0;
  29.             background-size: 32px;
  30.         }
  31. </style>
  32. <ul class="local-nav">
  33.     <li>
  34.         <a href="#">
  35.             <span class="local-nav-icon"></span>
  36.             <span>景点玩乐</span>
  37.         </a>
  38.     </li>
  39.     <li>
  40.         <a href="#">
  41.             <span class="local-nav-icon"></span>
  42.             <span>景点玩乐</span>
  43.         </a>
  44.     </li>
  45. </ul>

less+rem+媒体查询布局

rem

rem (root em)是一个相对单位不同的是rem的基准是相对于html元素的字体大小。
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px
rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。

媒体查询

  • 使用 @media查询，可以针对不同的媒体类型定义不同的样式
  • @media 可以针对不同的屏幕尺寸设置不同的样式
  • 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
  • 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
    1. @media mediatype and|not|only (media feature) {
    2.   CSS-Code;
    3. }
  1. mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型
all 用于索引设备
print 用于打印机和打印预览
screen 用于电脑屏幕 平板电脑 智能手机等

  1. 关键字

    1. 关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
  • and：可以将多个媒体特性连接到一起，相当于“且”的意思。
  • not：排除某个媒体类型，相当于“非”的意思，可以省略。
  • only：指定某个特定的媒体类型，可以省略。
  1. 媒体特性
    每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。
    注意他们要加小括号包含

width: 定义输出设备中页面可见区域宽度
min-width:定义输出设备中页面最小可见区域宽度
max-width:定义输出设备中页面最大可见区域宽度

  1.  <style>        
  2.         /*@media 屏幕上 且最大宽度为800px   max-width：800px  宽度<800px body显示为红色*/
  3.         @media screen and (max-width: 800px) {
  4.             body {
  5.                 background-color: #fa5a55;
  6.             }
  7.         }
  8.     </style>

媒体查询引入资源

根据不同的屏幕尺寸调用不同的CSS文件—-响应式可以使用这种方式
<link rel="stylesheet" href="./media1.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="./media2.css" media="screen and (min-width:640px)">

响应式布局

媒体查询

  • 响应式布局的容器 固定宽度
  • 大屏 ( >=1200px) 宽度定为 1170px
  • 中屏 ( >=992px) 宽度定为 970px
  • 小屏 ( >=768px) 宽度定为 750px

  • 超小屏 (100%)

    Bootstarp

    bootstrap布局容器

    Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类。
    .container

  • 响应式布局的容器 固定宽度

  • 大屏 ( >=1200px) 宽度定为 1170px
  • 中屏 ( >=992px) 宽度定为 970px
  • 小屏 ( >=768px) 宽度定为 750px
  • 超小屏 (100%) | | 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | | --- | --- | --- | --- | --- | | 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | | | | `.container`
    最大宽度 | None （自动） | 750px | 970px | 1170px | | 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-3">1</div>
  4.         <div class="col-md-3">2</div>
  5.         <div class="col-md-3">3</div>
  6.         <div class="col-md-3">4</div>
  7.     </div>
  8. </div>
超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏

.container-fluid

  • 流式布局容器 百分百宽度
  • 占据全部视口（viewport）的容器。

    列偏移

    使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
    1. <div class="row">
    2. <div class="col-md-4">.col-md-4</div>
    3. <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
    4. </div>
    5. <div class="row">
    6. <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    7. <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    8. </div>
    9. <div class="row">
    10. <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
    11. </div>