移动web

flex布局

父元素添加 display: flex，子元素可以自动的挤压或拉伸；

父级加了flex布局子级不再是所谓的行内，块级元素了，统一都可以设置宽高；并且加了浮动是无效的。（定位，位移，margin 才有效），子级宽度大于父级时，子级是不会换行的（自会压缩自己），当子级没设宽高的时候，子级的宽由内容撑开，高度是父级的高度；

组成部分： 弹性容器，弹性盒子；

主轴，侧轴

主轴与侧轴的转换：

flex-direction: column;（从上到下）比较常用；

flex-direction: row；（从左到右）少用；

flex-direction: row-reverse；（从右到左）少用；

flex-direction: column-reverse；（从下到上）少用；

lex布局：主轴对齐方式

justify-content: space-evenly; 物体之间距离相等

justify-content: flex-start; 左边靠拢

justify-content: space-around; 物体间的距离是靠边距距离的2倍

justify-content: center; 靠拢居中

justify-content: space-between; 两边无缝靠拢，中间的距离各占二分之一

justify-content: end; 右边靠拢

flex布局：侧轴对齐方式

目标：使用align-items调节元素在侧轴的对齐方式

修改侧轴对齐方式属性:

1.align-items（添加到弹性容器）

2.align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

伸缩比

目标：使用flex属性修改弹性盒子伸缩比

属性：flex : 值;

取值分类：数值(整数)

注意 : 只占用父盒子剩余尺寸

移动端的特点：

1.PC端网页比移动端网页的屏幕要大，pc有固定版心的，移动宽度多数为100%；

2.使用谷歌模拟器调试移动端网页；

3.分辨率分类：

物理分辨率是生产屏幕时就固定的，它是不可被改变的

逻辑分辨率是由软件（驱动）决定的

移动适配

长度单位：

目标：能够使用rem单位设置网页元素的尺寸；

rem：

网页效果：当屏幕的宽度不同时，网页元素的尺寸也跟着发生变化（等比缩放） 。px单位是一个绝对单位是不能实现等比缩放网页效果的，百分比布局特点宽度自适应，高度固定；

rem单位：是相对单位，rem单位相对于html标签的字号计算结果的，1rem=1html字号大小；

rem的移动适配-媒体查询：

目标：能够使用媒体查询设置差异化CSS样式

max-width:数值+px；（当屏幕小于多少数值的时）；

min-width：数值+px；（当屏幕大于多少数值时）；

写法：

    <style>
      body {
        background-color: #999;
      }
      /* 视口宽度大于等于768px 小于等于991px， 网页背景色是天蓝色 #6cf */
      @media (min-width: 768px) {
        body {
          background-color: skyblue;
        }
      }

      /* 视口宽度大于等于992px 小于等于1199px， 网页背景色是绿色 #0a0 */
      @media (min-width: 992px) {
        body {
          background-color: green;
        }
      }

      /* 视口宽度大于等于1200px， 网页背景色是橙色 orange */
      @media (min-width: 1200px) {
        body {
          background-color: orange;
        }
      }
    </style>
  </head>

  <body></body>
</html>

引入bootstrap框架

传统的写法是很麻烦的，我们引入一个bootstrap小框架就行啦；

第一：

引用文件里的（js按顺序代入）

1.bootstrap.css或bootstrap.min.css；

3.bootstrap.js

bootstrap栅格系统

简介：

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理；

“行（row）”必须包含在 .container （版心固定宽度）或 .container-fluid （100% 宽度）

less使用

写less转为css，使的写代码跟快捷和方便；

下载插件：

文件引入html的时候不能直接引入less文件，要引入css（less转换成的css文件）

嵌套写法：

  >.box2 {
    color: orange;
  }
}

// &:当前选择器,表示的就是直接上级
// 嵌套方式
.head {
  span {
    &.text {
      font-size: 20px;
    }
  }
 
}

变量写法：

@ThemeColor:#6cf;
@fontSize:14px;
body {
  background-color: #f3f4f3;
}

p {
  color: @ThemeColor;
  font-size: @fontSize;
}

a {
  background-color: @ThemeColor;
}

div {
  box-shadow: @ThemeColor;
}

导入less文件：

@import "./03-计算.less";

less计算：

1.计算：+ - * ./()
注意点：计算符的前后必须要用空格隔开
        除法要用 ()或者./
        单位可以写在前或者其他位置，如果一个表达式单位过多，会以第一个单位为准

*/
div {
  width: 100px + 200px;
  width: 200px - 100px;
  width: 50 * 4px;
  width: (200px / 100);
  width: 400px + 100deg + 20%;
  height: 100px+200px;
  width: (70 / 37.5rem);
}

移动web小知识