前端移动端布局的俩种方式(单独制作移动端页面、响应式页面布局)

移动端

移动端布局有俩种方式

1.单独制作移动端页面

  • 流式布局(百分比布局)
  • flex弹性布局
  • less+rem+媒体查询布局
  • 混合布局

2.响应式页面布局

  • 媒体查询
  • bootstrap

body初始化

jsx 复制代码
body {
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    color: black;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}
  • meta视口

  • 移动端特殊样式

    jsx 复制代码
    -webkit-tap-highlight-color:transparent;//高亮颜色设置为透明
    -webkit-appearance:none;//ios加上本属性自定义button样式
    -webkit-touch-callout:none;//禁用长按页面弹出菜单
  • 流式布局

    宽度使用百分比使盒子适应父盒子大小

    jsx 复制代码
    width:100%;
    max-width:980px;//最大放大到980px
    min-width:320px;
  • flex布局

    常见父项属性

    jsx 复制代码
    display:flex;

    常见子属性

    jsx 复制代码
    flex:1;
    flex:20%;//当超过五个子盒子可给父盒子flex-wrap换行
    • flex-direction主轴方向

      子元素根据主轴排列,设置主轴后剩下的即为侧轴

      row-reverse盒子顺序54321

    • justify-content主轴排列

      使用前确定主轴方向

      flex-end盒子顺序12345

    • flex-wrap子元素换行

      jsx 复制代码
      flex-wrap:wrap;//父盒子装不下子元素时自动换行
    • align-items,align-content侧轴排列

      align-items单行下设置

      align-content侧轴felx-wrap换行后可设置,单行下无效

    • flex-flow复合属性

      jsx 复制代码
      flex-flow:row,wrap;//主轴方向及换行
    • align-self单个子盒子侧轴排列

      控制单个盒子在侧轴上的排列方式

      jsx 复制代码
      align-self:flex-end;
    • order盒子索引号改变

      第一子盒子默认索引号为0,设置order为-1即可让该盒子成为第一个子盒子

  • less+rem+媒体查询布局

    • rem

      设置html的页面文字大小,再通过子元素用rem控制

      em相对于父元素字体大小,1em为父盒子字体的px

    • 媒体查询

      jsx 复制代码
      @media screen and(min-width:540px) and(max-width:800px){
      
      }

      查询类型

      关键字

      媒体特性

    • less

      jsx 复制代码
      @color:pink;
      body{
      	background-color:@color;
      }

      变量命名规范:必须有@前缀,不包含特殊字符,不以数字开头,大小写敏感

      easy less插件自动编译新css文件

      • less嵌套

        less嵌套子元素样式直接写入父元素里

        嵌套a:hover

      • less运算

        运算符左右以空格隔开

        俩数运算单位不同以第一位单位为准,只有一个单位则以该单位为准

    另一种适配方式:flexible.js+rem

  • 响应式

    • 布局容器划分大小

      jsx 复制代码
      .container {
                  height: 100px;
                  margin: 0 auto;
              }
              
              @media screen and (max-width:767px) {
                  .container {
                      width: 100%;
                  }
              }
              
              @media screen and (min-width:768px) {
                  .container {
                      width: 750px;
                  }
              }
              
              @media screen and (min-width:992px) {
                  .container {
                      width: 970px;
                  }
              }
              
              @media screen and (min-width:1200px) {
                  .container {
                      width: 1170px;
                  }
              }
    • bootstrap

      • container类

        bootstrap媒体查询已经划分好了上述容器,名字叫做.container

      • 栅格系统

        栅格系统将页面划分成12等份,行(row),列(column)

        例如:行(row)盒子内,每个盒子占三份,四个盒子共十二份

        如果占的份数<12则留有空白,份数>12则换行

        列嵌套最好row套row,可以自动消除父亲的padding,而且高度自动和父亲一样高

        列偏移:

        jsx 复制代码
        class="col-md-offset-4"4代表偏移的份数

        列排序:

        jsx 复制代码
        class="col-md-push-4"
        class="col-md-pull-4"

        响应式工具:

        与之相反的有visible-xs等等

相关推荐
10年前端老司机3 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程7 小时前
2025前端面试题
前端·面试
前端小趴菜059 小时前
React - createPortal
前端·vue.js·react.js
晓13139 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo9 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴10 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78911 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼11 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原11 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf12 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js