移动web端

一、单行文本省略号

  1. 关于行高的问题

    1. 将行高设置为1倍,盒子的高度就是文字大小1,可以测量的更加准确
    2. line-height:1;
    • dispaly:flex;

二、流式布局

  1. 宽度百分比,高度px或者里边的子元素敞开

  2. 移动页面注意点:

    1. 使用css3盒子模型
    2. 页面不能生成水平滚动条*
    3. 文字大小一般都是12像素**

    4. -webkit-tap-highlight-color: transparent;

      1. 清除超链接高亮背景*

三、flex布局常见属性

  1. flex-flow属性是flex-direction和flex-wrap属性的复合属性：

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

移动web开发rem适配布局

1.1 为什么要学rem布局

  1. 之前做的页面还有什么问题?

    1. 文字大小没有自适应
    2. 元素的高度没有自适应

  2. 如何解决

    1. rem布局

      • 媒体查询 +rem单位.
      • flexible.js + rem单位
    2. vw/vh

一、媒体查询-语法

  1. 作用

    • 根据设备不同的特性应用不同的css样式语法:
  2. 语法
    1. @media mediatype and|not|only (media feature){
    2.  css代码...
    3. }
    4. <link rel="stylesheet" media="mediatype and |notjonly (media feature)" href="xx.css">

  1. 语法介绍语法介绍:（其实还有更多的值，这里只罗列了一些，但我们只用红色的值)

    1. @media:对浏览器说:我要使用媒体查询了!
    2. mediatype:媒体类型(print打印机 |screen屏幕)
    3. and| not|only: and且、not非、only仅

    4. media feature:媒体特性,值有:

      • ·设备宽度width/max-width/min-width
      • ·设备高度height
      • ·设备方向: portrait (竖屏模式) | landscape(横屏模式)

语法：

  1.         /* 媒体查询属于css3属性
  2.         当屏幕宽度为700px的时候，执行的样式 */
  3.         @media screen and (width: 700px) {
  4.             body {
  5.                 background-color: greenyellow;
  6.             }
  7.         }
  8.         /* 简写
  9.         当屏幕宽度等于500px的时候，执行的样式 */
  10.         @media (width: 500px) {
  11.             body {
  12.                 background-color: yellow;
  13.             }
  14.         }
  15.         /* orientation:portrait  竖屏，当屏幕竖屏执行的样式 */
  16.         @media (orientation:portrait) {
  17.             body {
  18.                 background-color: green;
  19.             }
  20.         }
  21.         /* orientation:landscape  当屏幕横屏执行的样式 */
  22.         @media (orientation:landscape) {
  23.             body {
  24.                 background-color: red;
  25.             }
  26.         }

二、媒体查询区间的写法

  1. min-width:最小的宽度，大于等于某一个宽度执行的样式

  2. max-width: 最大的宽度 小于等于某一个屏幕宽度执行的样式

    1. /* 想实现   屏幕宽度320-600之间的box的背景颜色绿色 */
    2.      @media (min-width:320px) and (max-width:600px) {
    3.          .box {
    4.              height: 300px;
    5.              width: 300px;
    6.              background-color: green;
    7.          }
    8.      }

三、em和rem的区别

  1. em和rem单位区别

    1. 相同点：相对单位

    2. 不同点：

      • em参考的盒子里边文字的大小
      • rem参考的是跟标签文字大小
      • 1rem的大小=html跟标签的文字大小

四、媒体查询+rem使用

  1. 媒体查询+rem适配
  • 盒子里边的单位设置为rem，不同的屏幕宽度设置不同的的跟标签文字大小
  1. /* 媒体查询+rem适配
  2.         盒子里边的单位设置为rem，不同的屏幕宽度设置不同的的跟标签文字大小 */
  3.         @media (min-width: 320px) and (max-width:600px) {
  4.             html {
  5.                 font-size: 12px;
  6.             }
  7.         }
  9.         @media (min-width: 361px) and (max-width:540px) {
  10.             html {
  11.                 font-size: 24px;
  12.             }
  13.         }

第二种写法：

  1.      /* 利用了媒体查询区间（范围内）的层叠性 */
  2.     /* 媒体查询+rem适配的方案
  3.      将屏幕的宽度分成15份  不同屏幕/份数 */    
  4.         @media (min-width:0) {
  5.             /* 屏幕宽度大于等于0都是12px */
  6.             html {
  7.                 font-size: 12px;
  8.             }
  9.         }
  10.         @media (min-width:320px) {
  12.             /* 屏幕宽度大于等于320都是14px */
  13.             html {
  14.                 font-size: 14px;
  15.             }
  16.         }
  17.         @media (min-width:360px) {
  19.             /* 屏幕宽度大于等于360都是18px */
  20.             html {
  21.                 font-size: 18px;
  22.             }
  23.         }

计算rem的值

  • 以盒子宽为例
  • 假如盒子的宽度为54px 屏幕分成了15份，375的屏幕宽度*
  • 一份375/15=25px 1rem=25px
  • 54px /25=2.16px
  • 屏幕宽度为360px 1份宽度 360/15=24px
  • 像素大厨 基数/份数

屏幕宽度为360px 1份宽度 360/15=24px

五、rem+媒体查询适配

  1. 先分多少份 10份
  2. 每一份宽度(1rem值的大小) ui设计稿 320px / 10 1份是32px,
  3. 将像素大厨的单位rem, 把基数设置为1份的大小32px
  4. 写媒体查询区间 屏幕宽度/10,区间从小往大写