跳至主要內容

移动端

程序员李某某大约 10 分钟

移动端

基本概念

视口

<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  • 理想视口 <-- 视觉视口 <-- 布局视口
  • width 宽度设置的是viewport宽度，可以设置device-width特殊值
  • initial-scale 初始缩放比，大于0的数字，标准设置为1.0
  • maximum-scale 最大缩放比，大于0的数字，标准设置为1.0
  • minimum-scale 最小缩放比，大于0的数字，标准设置为1.0
  • user-scalable 用户是否可以缩放，yes或no（1或0），标准设置为no

二倍图

  • PC端 和 早前的手机屏幕 / 普通手机屏幕: 1CSS像素 = 1 物理像素的
  • 我们开发时候的1px 不是一定等于1个物理像素的
    • PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同
    • 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
  • Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从 而达到更高的分辨率，并提高屏幕显示的细腻程度
  • 基于Retina 导致 1CSS像素 ≠ 1px，图片按照原大小就会变得模糊，我们需要一个更大的图片，比例取决于dpr（物理像素比），一般我们采用二倍图
  • 二倍的图片依然要放在原来设定大小的盒子里，故需要设置width或height属性，或者背景图片的background-size，还原为之前的大小
img{
    /*原始图片100*100px*/
    width: 50px;
    height: 50px;
}
.box{
    /*原始图片100*100px*/
    background-size: 50px 50px;
}
  • 精灵图的二倍图
    • 将拿到的精灵图先等比缩小到一半
    • 再量坐标
    • 放到盒子里，精灵图在盒子里缩小一半

CSS初始化

移动端 CSS 初始化推荐使用 normalize.css/

  • Normalize.css：保护了有价值的默认值
  • Normalize.css：修复了浏览器的bug
  • Normalize.css：是模块化的
  • Normalize.css：拥有详细的文档

官网地址： http://necolas.github.io/normalize.css/

特殊样式

/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

流式布局

京东首页参考

一、 设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

二、 常用初始化样式

body {
    margin: 0 auto;
    min-width: 320px;
    max-width: 640px;
    background: #fff;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    line-height: 1.5;
    color: #666;
}

三、盒子宽度采用%

Flex布局

通过给父盒子添加flex属性，来控制子盒 子的位置和排列方式

  • 给div加上 display：flex ，内部的span就可以直接指定width、height、背景色、边框

  • 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align（对齐方式） 属性将失效

父元素属性

  • flex-direction 主轴方向 --- 子元素排列方向

    • row 默认值从左到右
    • row-reverse 从右到左
    • column 从上到下
    • column-reverse 从下到上

  • justify-content --- 子元素排列方式 --- 在主轴方向设置后使用

    • flex-start 默认值 从头部开始 如果主轴是x轴，则从左到右
    • flex-end 从尾部开始排列
    • center 在主轴居中对齐（如果主轴是x轴则 水平居中）
    • space-around 平分剩余空间
    • space-between 先两边贴边 再平分剩余空间（重要）

  • flex-wrap --- 子元素是否换行

    • nowrap 默认值，不换行
    • wrap 换行

  • align-items --- 侧轴排列方式 ---- 在子项为单项（单行）的时候使用

    • flex-start 从上到下，上对齐
    • flex-end 从下到上，下对齐
    • center 挤在一起居中，垂直居中
    • stretch 拉伸 （默认值 ）

  • align-content --- 侧轴排列方式 ---- 只能在子项出现 换行 的情况（多行）的时候使用

    • flex-start 默认值在侧轴的头部开始排列，上对齐
    • flex-end 在侧轴的尾部开始排列，下对齐
    • center 在侧轴中间显示，居中
    • space-around 子项在侧轴平分剩余空间
    • space-between 子项在侧轴先分布在两头，再平分剩余空间
    • stretch 设置子项元素高度平分父元素高度，拉伸

  • 复合属性 --- flex-flow:row wrap; --- 是 flex-direction 和 flex-wrap 属性的复合属性

子元素属性

.item {
	flex: 1; 		/* default 0 */
    align-self: flex-end;
}
  • flex --- 定义子项目分配剩余空间，用flex来表示占多少份数
  • align-self --- 控制子项自己在侧轴上的排列方式
    • 允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性
    • 默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch
  • order --- 定义项目的排列顺序
    • 数值越小，排列越靠前，默认为0
    • 和 z-index (定位堆叠次序)不一样

Rem布局

  • em是相对父元素字体大小的单位，2em就是父元素字体大小的2倍
  • rem（root em）是相对root（根元素、html）字体大小的单位
  • 父元素文字大小可能不一致， 但是整个页面只有一个html，rem可以很好来控制整个页面的元素大小
/* 根html 为 12px */
html {
	font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
	font-size: 2rem;
}

媒体查询

@media mediatype and|not|only (media feature) {
	CSS-Code;	/* css 样式 */
}
  • @media
  • mediatype :媒体类型 ，常用 screen
    • all 用于所有设备
    • print 用于打印机和打印预览
    • screen用于电脑屏幕，平板电脑，智能手机等
  • and|not|only ：常用and做连接，可多次使用
    • and：可以将多个媒体特性连接到一起，相当于“且”的意思
    • not：排除某个媒体类型，相当于“非”的意思，可以省略
    • only：指定某个特定的媒体类型，可以省略
  • (media feature):媒体特性 必须有小括号包含
    • width 定义输出设备中页面可见区域的宽度
    • min-width 定义输出设备中页面最小可见区域宽度
    • max-width 定义输出设备中页面最大可见区域宽度
/* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */
/* max-width 小于等于800 */
/* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */

@media screen and (max-width: 800px) {
    body {
        background-color: pink;
    }
}

@media screen and (max-width: 500px) {
    body {
        background-color: purple;
    }
}

案例：根据页面宽度改变背景变色

  • 按照从大到小的或者从小到大的思路 --- 从小到大来写，代码更简洁
  • 注意我们有最大值 max-width 和最小值 min-width都是包含等于
  • 当屏幕小于540像素， 背景颜色变为蓝色 （x <= 539）
  • 当屏幕大于等于540像素 并且小于等于 969像素的时候 背景颜色为 绿色 ( 540=<x <= 969）
  • 当屏幕大于等于 970像素的时候，背景颜色为红色 （ x >= 970）

媒体查询 + rem

@media screen and (max-width: 500px) {
    html {
        font-size: 50px;
    }
}

div {
    width: 1rem
}

不同设备样式很多时，引入不同资源

<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

为了开发简单，引入flexible.js就不需要再写媒体查询

手机淘宝团队出的简洁高效 移动端适配库 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理 它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。 我们要做的，就是确定好我们当前设备的html 文字大小就可以了 比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以 里面页面元素rem值： 页面元素的px 值 / 75 剩余的，让flexible.js来去算 github地址：https://github.com/amfe/lib-flexible

设计稿大小

一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果 现在基本以750为准

动态设置 html 标签 font-size 大小

  • 假设设计稿是750px
  • 假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
  • 每一份作为html字体大小，这里就是50px
  • 那么在320px设备的时候，字体大小为320/15 就是 21.33px
  • 用我们页面元素的大小 除以不同的 html 字体大小会发现他们比例还是相同的
  • 比如我们以 750为标准设计稿
  • 一个100*100像素的页面元素 在 750屏幕下， 就是 100 / 50 转换为rem 是 2rem * 2 rem 比例是 1比1
  • 320屏幕下， html 字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是 宽和高的比例还是 1比1
  • 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果

元素大小取值方法

  • 最后的公式： 页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
  • 屏幕宽度/划分的份数 就是 html font-size 的大小
  • 或者： 页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

响应式布局

Bootstrap

中文官网open in new window官网open in new window推荐使用open in new window

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器

  • container 类
    • 响应式布局的容器 固定宽度
    • 大屏 ( >=1200px) 宽度定为 1170px
    • 中屏 ( >=992px) 宽度定为 970px
    • 小屏 ( >=768px) 宽度定为 750px
    • 超小屏 (100%)
  • container-fluid 类
    • 流式布局容器 百分百宽度
    • 占据全部视口（viewport）的容器

栅格系统

  • 按照不同屏幕划分为1~12 等份
  • 行（row） 可以去除父容器作用15px的边距
  • xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
  • 列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
  • 每一列默认有左右15像素的 padding
  • 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class="col-md-4 col-sm-6"
<!-- 列嵌套 -->
<div class="col-sm-4">
    <div class="row">
        <div class="col-sm-6">小列</div>
        <div class="col-sm-6">小列</div>
    </div>
</div>

<!-- 列偏移 -->
<div class="row">
    <div class="col-lg-4">1</div>
    <div class="col-lg-4 col-lg-offset-4">2</div>
</div>

<!-- 列排序 -->
<div class="row">
    <div class="col-lg-4 col-lg-push-8">左侧</div>
    <div class="col-lg-8 col-lg-pull-4">右侧</div>
</div>

<!-- 隐藏与显示 -->
<div class="row">
    <div class="col-lg-4 col-lg-push-8 hidden-xs">仅在超小屏下隐藏</div>
    <div class="col-lg-8 col-lg-pull-4">右侧</div>
</div>

vw和wmin布局

和rem类型，但vw、vh不再以根字体大小为基准，而是以可视窗口为基准，更方便，为了等比缩放，我们一般只使用vw

现在为了照顾横屏与竖屏显示的不同，又出现了vmin和wmax，vmin以宽高较小的来布局，常用vmin

实战技巧

背景色渐变

background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
background: -webkit-linear-gradient(left, red , blue);
background: -webkit-linear-gradient(left top, red , blue);
  • 背景渐变必须添加浏览器私有前缀
  • 起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top
上次编辑于:
贡献者: ext.liyuanhao3
Copyright © 2025 程序员李某某