zepto

最新推荐文章于 2024-07-18 20:39:42 发布

原创最新推荐文章于 2024-07-18 20:39:42 发布 · 149 阅读

CC 4.0 BY-SA版权

博客介绍了移动端常用布局，包括流式布局、伸缩盒布局、响应式布局，这些布局元素只能做宽度适配。还提到通过rem布局实现宽度和高度等比缩放适配，介绍了rem基准值计算方法。此外，讲解了伸缩盒布局各部分设置，以及Zepto提供类似jQuery的API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端常用的布局

流式布局，设置宽度百分比
伸缩盒布局（弹性布局）flex
响应式布局媒体查询（在超小屏时，使用的也是流式布局）

------共同点：元素只能做宽度上的适配

实现宽度和高度都能做到的（等比缩放）适配：

通过rem布局-----将页面中能用到px单位都转换为rem单位

计算rem的基准值：预设的基准值/设计稿宽度*当前设备的宽度

less中的循环---函数的迭代，递归（需要使用序号遍历）

函数名（）when（）{

方法

函数名（）；

}

列：

.adapterMixin(@index) when(@index>0){
  @media(min-width: extract(@adapterDeviceList,@index)){
    //@media(min-width: 414px){
    //  html{
    //    font-size: 414*100/750px;
    //  }
    //}
    //1rem
    html{
      font-size: @baseFontSize/@psdwidth*extract(@adapterDeviceList,@index);
    }
  }
  .adapterMixin(@index - 1);
}

rem的基准值：预设的基准值/设计稿的高度*当前设备的宽度

extract（数组名，索引）

 extract(@adapterDeviceList,@index)

伸缩盒布局（弹性盒布局）

伸缩盒布局包含四个部分：

父容器：

给父容器添加伸缩布局display: flex（有浮动的效果）

设置水平轴排序方式：justify-content：flex-start（类似左浮动） flex-end （类似右浮动） center （居中） space-around space-between

设置垂直轴的排序方式：align-items：flex-start flex-end center baseline

设置子元素水平排列还是垂直排列 flex-direction ：row row-reverse column column-resever

设置子元素换行：flex-wrap：wrap；
子元素

设置子元素宽度 flex：数值（切成几份）
X轴
Y轴

zepto

Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery

mui