Deng
Deng
移动基础 | odjBlog
    欢迎来到odjBlog的博客!
> web前端学习 > 移动基础

移动基础

web前端学习 odjbin 4年前 (2022-03-07) 22次浏览 0个评论

1.移动 Web 开发入门

前端开发分类

  • PC 端开发
  • 移动端开发
    • 移动 Web 开发
    • 混合式开发(Hybrid App)
    • 微信小程序/公众号开发

物理像素

CSS 像素

  • 逻辑像素/设备独立像素
  • 设备像素比(dpr: device pixel ratio) dpr=设备像素/CSS 像素(缩放比是 1 的情况下) dpr=2 : 表示 1 个 css 像素用 2x2 个设备像素来绘制
  • 缩放 缩放改变的是 CSS 像素的大小 放大 : 1CSS 像素=2x2 个物理像素 缩小 : 2x2 个 CSS 像素=1 个物理像素
  • PPI 每英寸的物理像素点 ppi : pixels per inch dpi : dots per inch

视口-viewport

<meta name="viewport" content="width=device-width, initial-scale=1">
 // 视口宽度
    console.log(window.innerWidth);
    console.log(document.documentElement.clientWidth);
    console.log(document.documentElement.getBoundingClientRect().width);
//考虑兼容性
    var viewWidth=document.documentElement.clientWidth||window.innerWidth;
   // console.log(screen.width);
    // dpr
    console.log(window.devicePixelRatio);

box-sizing

  • box-sizing : content-box [box 的宽高是内容的宽高] 向外扩张
  • box-sizing : border-box 从 border 开始的宽高 加了 padding border 是向内压缩

flex 布局-入门

  • 什么是 flex 容器? 采用 flex 布局的元素,称为 flex 容器 .box{display:flex | inline-flex;}
  • 什么是 flex 项目(flex item)? flex 容器的所有子元素自动成为容器成员,称为 flex 项目
  • 项目默认沿主轴排列

移动 webapp 入门

  • display 属性 display:flex | inline-flex; flex : 将对象作为弹性伸缩盒显示[具有 block 元素][有默认 100%宽度,右边如果无则留白] inline-flex : 将对象作为内联块级弹性伸缩盒显示,由里面内容撑开

  • flex-direction 属性 决定主轴方向(即项目的排列方向) .box{ flex-direction : row | row-reverse | column | column-reverse; }

    • row(默认值) : 主轴为水平方向,起点在左端
    • row-reverse : 主轴为水平方向,起点在右端
    • column : 主轴为垂直方向,起点在上沿
    • column-reverse: 主轴为垂直方向,起点在下沿

  • flex-wrap 属性 默认情况下,项目都排在一条线(又称"轴线")上 flex-wrap 属性定义,如果一条轴线排不下,如何换行 .box{ flex-wrap: nowrap | wrap | wrap-reverse; }

    • nowrap(默认) : 不换行
    • wrap : 换行, 第一行在上方
    • wrap-reverse : 换行,第一行在下方
  • flex-flow 属性 是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap .box{ flex-flow : flex-direction | flex-wrap }

  • justify-content 属性 定义了项目在主轴上的对齐方式 .box{ justify-content: flex-start | flex-end | center | space-between | space-around; }

    • flex-start(默认值) : 左对齐
    • flex-end : 右对齐
    • center : 居中
    • space-between : 两端对齐,项目之间的间隔都相等
    • space-around : 每个项目两侧的间隔相等,所以,项目之间的间隔比项目与边框的间隔大一倍

  • align-items 属性 [垂直居中] align-items 属性定义项目在交叉轴上如何对齐 .box{ align-items: flex-start | flex-end | center | baseline | stretch; }

    • flex-start: 交叉轴的起点对齐
    • flex-end: 交叉轴的终点对齐
    • center : 交叉轴的中点对齐
    • baseline: 项目的第一行文字的基线[数字下划线]对齐
    • stretch(默认值) : 如果项目未设置高度或设为 auto,将沾满整个容器的高度

  • align-content 属性 定义了多根轴线(多行)在交叉轴上的对齐方式 如果项目只有一根轴线(一行),该属性不起作用 .box{ flex-wrap : wrap;//换行 align-content : flex-start | flex-end | enter | space-between | space-around | stretch;} }

    • flex-start : 整体 与交叉轴的起点对齐[左上角]
    • flex-end : 与交叉轴的终点对齐[左下角]
    • center : 与交叉轴的中点对齐
    • space-between : 与交叉轴两端对齐,轴线之间的间隔平均分布
    • space-around: 每根轴线两侧的间隔都相等 所以,轴线之间的间隔比轴线与边框的间隔大一倍
    • stretch(默认值) : 轴线占满整个交叉轴[如果项目未设置高度或设为 auto,将沾满整个容器的高度]

flex 布局-项目的属性

  • order 属性 定义项目的排列顺序 数值越小啊,排列越靠前,默认为 0

  • flex-grow 属性 定义项目的放大比例,默认为 0,即如果存在剩余空间,也不放大

    • 如果所有项目的 flex-grow 属性都为 1,则它们将等分剩余空间(如果有的话)
    • 如果一个项目的 flex-grow 属性为 2,其他项目都为 1,则前者占据的剩余空间将比其他项多一倍 .item{ flex-grow: <number //默认为 0 }
    • 如果有的项目有 flex-grow 属性,有的项目有 width 属性,有 flex-grow 属性的项目将等分剩余空间

  • flex-shrink 属性 定义了项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小

    • 如果所有项目的 flex-shrink 属性都为 1,当空间不足时,都将等比例缩小
    • 如果一个项目的 flex-shrink 属性为 0,其他项目都为 1,则空间不足时,前者不缩小
    • 负值对该属性无效 .item{ flex-shrink: <number; }

  • flex-basis 属性 定义了在分配多余空间之前,项目占据的主轴空间(main size),[默认为 auto]

    • 浏览器根据这个属性,计算主轴是否有多余空间
    • 它的默认值为 auto,即项目的本来大小
    • flex-basis 优先级比 width 高 .item{ flex-basis: <length ; }

  • flex 属性 是 flex-grow, flex-shrink 和 flex-basis 的简写,默认值为 0 1 auto

    • 后两个属性可选
    • 该属性有两个快捷值 : auto(1 1 auto) 和 none(0 0 auto)
    • .item{ flex: none | [ <flex-grow <flex-shrink ? || <flex-basis ]}
    • flex : 1; 是 flex : 1 1 0%; 的缩写

  • align-self 属性 允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性

    • 默认值为 auto 表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch .item{ align-self : auto | flex-start | flex-end | center | baseline | stretch; }

flex 布局-实例

<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>3.6 flex 布局--实例</title>
  <link rel="stylesheet" href="css/iconfont.css">
  <style>
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    body {
      background-color: #e2e2e2;
      color: #595B66;
    }
    a {
      font-size: 12px;
      color: #686868;
      text-decoration: none;
    }
    li {
      list-style: none;
    }
    html {
      /* html 的父容器，可以认为是 viewport */
      height: 100%;
    }
    body {
      display: flex;
      flex-direction: column;
      /* vh : viewport 的高 vw 宽 1vh:可视高度的 1%, 100vh:100%*/
      /* min-height: 100vh;兼容性不好 */
      /* 相对于 html 的 100% */
      min-height: 100%
    }
    .header {
      width: 100%;
      height: 50px;
      background-color: rgba(222, 24, 27, 0.9);
      color: #fff;
      /* 文字水平居中 */
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .main {
      flex: 1;
      color: #fff;
      display: flex;
    }
    .main-content {
      /* 将 main 设置为 flex 容器,content 瓜分剩余空间 */
      flex: 1;
      background-color: green;
      /* 设置为 flex 容器,里面的文字则变为 flex 项目 */
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .main-sidebar {
      /* 粉色 sidebar 在左边 */
      order: -1;
      width: 150px;
      background-color: pink;
      /* 设置为 flex 容器,里面的文字则变为 flex 项目 */
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .tabbar-container {
      width: 100%;
      height: 50px;
      background-color: #fff;
      /* 不管内容多少,footer 一直在底部显示 [将 body 设置为 flex 容器,header,main,footer 同时为 flex 项目]*/
    }
    .tabbar{
      display: flex;
      /* footer 撑满底部 */
      height: 100%;
    }
    .tabbar-item{
      flex: 1;
      /* background-color: yellow; */
    }
    .tabbar-link{
      display: flex;
      height: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .tabbar-link .iconfont{
      font-size: 24px;
    }
  </style>
</head>
<body>
  <header class="header">header</header>
  <div class="main">
    <div class="main-content">content</div>
    <div class="main-sidebar">sidebar</div>
  </div>
  <footer class="tabbar-container">
    <ul class="tabbar">
      <li class="tabbar-item tabbar-item-active">
        <a href="###" class="tabbar-link">
          <i class="iconfont icon-home"></i>
          <span>首页</span>
        </a>
      </li>
      <li class="tabbar-item">
        <a href="###" class="tabbar-link">
          <i class="iconfont icon-category"></i>
          <span>分类页</span>
        </a>
      </li>
      <li class="tabbar-item">
        <a href="###" class="tabbar-link">
          <i class="iconfont icon-cart"></i>
          <span>购物车</span>
        </a>
      </li>
      <li class="tabbar-item">
        <a href="###" class="tabbar-link">
          <i class="iconfont icon-personal"></i>
          <span>个人中心</span>
        </a>
      </li>
    </ul>
  </footer>
</body>
</html>

媒体查询-基础

 /* 1. 什么是媒体查询 */
    @media screen and (min-width:900px) {
      body {
        background-color: pink;
      }
    }
    /* 2.为什么需要媒体查询
    一套样式不可能适应各种大小的屏幕
    针对不同的屏幕大小写样式,让我们的页面在不同大小的屏幕上都能正常显示 */
    /* 3.媒体类型 */
    /* all(default)
    screen / print[ctrl+p] /speech(屏幕阅读器) */
    @media (min-width:900px) {}
    /* 4.媒体查询中逻辑[与:(and),或(,),非(not)] */
    /* 或 */
    @media screen and (min-width:1024px),
    (max-width:900px) {}
    /* 非 */
    @media not screen and (min-width:900px)and (max-width:1024px) {}
    @media not screen and (min-width:1024px),
    (max-width:900px) {}
    /* 5.媒体特征表达式 */
    /* width/max-width/min-width
      -webkit-device-pixel-ratio/-webkit-max-device-pixel-ratio/-webkit-min-pixel-ratio
      orientation
          landscape[横屏]/portrait
    后面的不用
      height
      device-width/device-height
      screen.width/screen.height
      aspect-ratio 视口的宽高比 */
    /* @media screen and (min-width: 900px) { */
    @media (-webkit-max-device-pixel-ratio: 2) and (orientation: landscape) {}

媒体查询-策略

/* mobile first 先考虑移动优先 */
/* 最小屏 从小到大 */
.col { width: 100%; }
@media (min-width: 576px) { 
.col { width: 50%; }
}
@media (min-width: 768px) { 
.col { width: 25%; }
}
@media (min-width: 992px) { 
.col { width: 16.6666666667%; }
}
@media (min-width: 1200px) { .col { width: 8.33333333%; } }

移动端常用单位

  • px : 固定大小 - em[不常用麻烦] : height:5em; font-size:12; <==>height:60px;
    • [根据自身的字体大小 pc 端的 font-size 最小是 12]
    • [注意: 如果 font-size: 12rem; 则 height 会根据父元素的 font-size:20px,,去计算 height: px
  • rem : height 是根据 html 的 font-size 修改
  • vw , vh: 视口单位 - 随着屏幕缩小而高度降低,字体变小,,用 rem
用 px/em 做单位，每次都要用 js 一一修改 能不能统一修改呢？ 
375px -> 1rem = 20px;
height = 50 / 20 = 2.5rem; 
750px -> 1rem = 40px; 
height = 100 / 40 = 2.5rem; 
?(视口宽度) -> 1rem = (? / 375) * 20 px 
?(视口宽度) = document.documentElement.clientWidth 
1rem = (document.documentElement.clientWidth / 375) * 20 px 
1rem = (document.documentElement.clientWidth / 750) * 40 px 
height = 2.5rem;
        setRemUnit();
        window.onresize = setRemUnit;
        function setRemUnit() {
            var docEl = document.documentElement;
            var viewWidth = docEl.clientWidth;
            docEl.style.fontSize = viewWidth / 375 * 20 + 'px';
            // docEl.style.fontSize = viewWidth / 750 * 40 + 'px';
            // 1rem = 20px}

2.响应式布局

什么是响应式布局

  • 对不同屏幕尺寸 (大小) 做出响应,并进行相应(对应)布局的一种移动 Web 开发方式

结构,内容和布局的概念

    <header class="header-container">
        <div class="container">
            <div class="header-logo-container">
                <!-- 内容 -->
                <a href="#"><img src="img/logo.svg" alt="logo"></a>
            </div>
            <div class="header-nav-container"></div>
        </div>
    </header>

头部 header 区

  • 用图片很耗资源
  <header class="header-container">
        <div class="container">
            <div class="row">
                <div class="header-logo-container col-8 col-md-3">
                    <a href="./index.html" class="header-logo">
                        <img src="img/logo.svg" alt="logo">
                    </a>
                </div>
                <div class="header-btn-container col-4 d-md-none">
                    <button type="button" class="btn-toggle" id="btn-toggle">
                        <span class="btn-toggle-bar"></span>
                        <span class="btn-toggle-bar"></span>
                        <span class="btn-toggle-bar"></span>
                    </button>
                </div>
                <nav class="header-nav-container col-md-9 d-none d-md-block">
                    <ul class="header-nav">
                        <li class="header-nav-item">
                            <a href="#" class="header-nav-link">手机&平板</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

.btn-toggle {
    padding: 10px;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.btn-toggle:hover {
    background-color: #f9f9f9;
}
.btn-toggle:hover .btn-toggle-bar {
    background-color: #1428a0;
}
.btn-toggle-bar {
    display: block;
    width: 24px;
    height: 4px;
    background-color: #363636;
    border-radius: 2px;
}
/*兄弟选择器*/
/*第二条线和第三条线上面都有 4px,第一个上面没有*/
.btn-toggle-bar + .btn-toggle-bar {
    margin-top: 4px;
}

三级目录下的文字排列

<div class="subCate">
           <a v-for="item in sub" :key="item">{{item.text}}</a>
</div>
.subCate{
  padding-top: 15px;
  width: 286px;
  height: 352px;
  display: grid;
  grid-template-columns: 143px 143px;
  grid-template-rows: 44px 44px 44px 44px 44px 44px 44px 44px;
  grid-auto-flow: column;
}
.subCate a{
  width: 143px;
  line-height: 20px;
  padding: 12px 0;
}

三级目录实现 v-for 循环嵌套

 <div class="cate-box" v-for="(item) in data" :key="item">
                <a class="cate-title" href="">
                  <img alt="" :src="item.url">
                  <span>{{item.title}}</span>
                </a>
                <div class="subCate">
                  <a v-for="(itemOne) in item.data" :key="itemOne">{{itemOne.text}}</a>
                </div>
              </div>
 data:[
        {
          url:require('../assets/images/zuanshi.png'),
          title:'精选',
          data:[
            { text: '运营设计' },
            { text: '包装' },
            { text: '动画/影视' },
            { text: '人像摄影' },
            { text: '商业插画' },
            { text: '电商' },
            { text: 'APP 界面' },
            { text: '艺术插画' },
            { text: '家装设计' },
            { text: '海报' },
            { text: '文章' }
          ]
        }
      ],
喜欢 (0)赏
[]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi，您需要填写昵称和邮箱！

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
已稳定运行：3年255天3小时49分