移动端知多少

魔法少女蕊蕊
293 阅读6分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

最近在复习移动端，所以整理了一下笔记

1. 移动端基础

1.1 浏览器

兼容移动端浏览器，处理Webkit内核浏览器

1.2 手机屏幕

常用尺寸单位px

1.3 常见移动端屏幕尺寸

前端开发，不建议纠结dp,dpi,pt,ppi等单位

1.4 移动端调试方法

  1. Chorme DevTools（谷歌浏览器）的模拟手机测试
  2. 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
  3. 使用外网服务器，直接IP或域名访问

2.视口

浏览器显示页面内容的屏幕区域。可分为布局视口、视觉视口和理想视口。

（视觉视口指用户能看到的网络区域）

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，也就是设备多宽，理想视口多宽。

meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码

3.二倍图

3.1 物理像素&物理像素比

  • 物理像素是我们所说的分辨率。
  • 物理像素比是一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
  • 在iPhone8中，1px开发像素=2个物理像素

3.2 多倍图

插入图片

/* 在iphone8下面 */
img {
    /* 原始图片100*100px */
    width: 50px;
    height: 50px;
}
.box {
    /* 原始图片100*100px */
    background-size: 50px 50px;
}
复制代码

背景缩放    background-size: 背景图片宽度 背景图片高度；

  • 单位：长度|百分比|cover|contain
  • cover等比例把背景图片扩展至足够大，使背景图像完全覆盖背景区域，可能会部分背景图片显示不全
  • contain等比例把图像扩展至最大尺寸，使其宽度和高度完全适应内容区域，当宽度或高度铺满盒子就不再拉伸了，可能有部分空白区域

4.移动端开发选择

1.单独制作移动端页面（主流） ：通常，网址域名前加 m(mobile) 可以打开移动端。

通过判断设备，如果是移动设备打开，则跳到移动端页面。

2.响应式页面兼容PC移动端

5.移动端技术解决方案

CSS初始化 normalize.css

官网： necolas.github.io/normalize.c…

C3盒子模型 box-sizing: border-box;

加上这行代码后，padding和border不会撑大盒子。

传统盒子模型 box-sizing: content-box;

 6.移动端常见布局

 6.1 流式布局（百分比布局）

可设置最大值max-width max-height ， 最小值min-width min-height


常用初始化样式

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;
}
复制代码

二倍精灵图做法

  1. 在firework里把精灵图等比例缩放为原来的一半
  2. 根据大小测量坐标（注意代码中backgroung-size也要写：精灵图原来宽度的一半）

图片格式

Flex布局

1 .布局原理

flexible Box的缩写，意为“弹性布局”。用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

  • 当我们为父盒子设置flex布局后，子元素的float、clear和vertical-align属性将失效。
  • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

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

2.常见父项属性

  • flex-direction: 设置主轴方向
  • justify-content: 设置主轴上的子元素的排列方式
  • flex-wrap: 设置子元素是否换行
  • align-content: 设置侧轴上的子元素的排列方式（多行）
  • align-items: 设置侧轴上的子元素的排列方式（单行）
  • flex-flow: 复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction: 设置主轴方向

2.1 主轴与侧轴

  • 默认的主轴方向为x轴方向，水平向右
  • 默认的侧轴方向为y轴方向，竖直向下

2.2 属性值

注： 主轴侧轴会变化，看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: 设置侧轴上的子元素的排列方式（多行）

在align-items基础上增加

space-around子项在侧轴平分剩余空间
space-between子项在侧轴先分布在两头，再平分剩余空间

flex-flow: 复合属性，相当于同时设置了flex-direction和flex-wrap

flex-flow： row wrap;

3.flex布局子项常见属性

  • flex子项目占的份数
  • align-self控制子项自己在侧轴的排列方式
  • order属性定义子项的排列顺序

 3.1 flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

.item {
    flex: <number>; /* default 0 */
}
复制代码

3.2 align-self控制子项自己在侧轴上的排列方式

align-self可覆盖align-items,默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch.

span:nth-child(2){
    /* 设置自己在侧轴上的排列方式 */
    align-self: flex-end;
}
复制代码

3.3 order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0（和z-index不一样）

!important 权重无穷大

背景渐变 linear-gradient

背景线性渐变（需要添加浏览器私有前缀）

语法1

background: linear-gradient(起始方向，颜色1，颜色2);
background: -webkit-linear-gradient(left,red,blue);
background: -webkit-linear-gradient(left,top,red,blue);
复制代码

起始方向可以是： 方位名词 或者 度数，如果省略默认就是top

rem适配布局

1.rem基础

rem单位

  • rem(root em)是一个相对单位，类似于em，em是相对于父元素字体大小

  • 不同的是rem是相对于html元素的字体大小，与父元素无关

eg.根元素（html）设置font-size=12px;非根元素设置width，换成px表示就是24px

rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小从而实现整体控制

2.媒体查询

  • 使用@media查询，可以针对不同的媒体类型定义不同的样式
  • @media可以针对不同的屏幕尺寸设置不同的样式
  • 当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
  • 目前针对很多苹果手机、Android手机、平板等设备都用得到媒体查询

 语法规范

@media mediatype and|not|only (media feature){
    CSS-Code;
}
复制代码

  • 用@media开头，注意@符号
  • mediatype媒体类型
  • 关键and not only
  • media feature 媒体特性，必须有小括号包含

 2.1 mediatype查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

值解释说明
all用于所有设备
print用于打印机和打印预览
screen用于电脑屏幕，平板电脑，智能手机等

2.2 关键字

将媒体类型或多个媒体特性连接到一起作为媒体查询的条件

  • and： 可以将多个媒体特性连接到一起，相当于"且"的意思
  • not： 排除某个媒体类型，相当于“非”的意思
  • only： 指定某个特定的媒体类型，可以省略

2.3 媒体特性

每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格（注意加小括号包含）

值 解释说明
width定义输出设备中页面可见区域的宽度
min-width定义输出设备中页面最小可见区域的宽度
max-width定义输出设备中页面最大可见区域的宽度

2.3 媒体查询+rem实元素动态大小变化

2.4 引入资源

针对不同的屏幕尺寸，调用不同的css文件

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
复制代码

3.Less基础

Less中文网址： lesscss.cn/

Less是一门CSS预处理语言，它扩展了CSS的动态特性

3.1 Less变量

@变量名:值;

变量命名规范

  • 必须有@前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感

 3.2 Less编译

用VS Code中的Easy LESS插件

3.3 Less嵌套

子元素的样式直接写到父元素里面

遇到交集/伪类/伪元素选择器：

  • 内层选择器的前面没有&符号，则他被解析为父选择器的后代

  • 如果有&符号，则被解析为父元素自身或父元素的伪类

    /* CSS中写法 */
a:hover {
    color: red;
}
/* Less中写法 */
a {
    &:hover {
        color: red;
    }
}
复制代码

 3.4 Less运算

任何数字、颜色、变量都可以参与加减乘除运算。

注：

  • 运算符中间左右各有一个空格隔开1px + 5
  • 对于两个不同单位的值之间的运算，运算结果的值取第一个值的单位
  • 如果两个值之间只有一个值有单位，则运算结果就取该单位

4.rem适配方案

 方案一

rem+媒体查询+less技术

设计稿常见尺寸宽度

设备常见宽度
iphone 4 5640px
iphone 678750px
Android大部分4.7~5寸的安卓设备为720px

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

​编辑

元素大小取值方法

​编辑

 将一个样式（css）文件导入另一个样式文件中： @import"css文件名"

区别于link,link是把一个样式文件引入 html 页面中

方案2

rem+flexible.js

github地址：github.com/amfe/lib-fl…

响应式布局 

设备划分尺寸区间宽度
超小屏幕（手机）<768px100%
小屏设备（平板）>=768px ~ <992px750px
中等屏幕（桌面显示器）>=992px ~ <1200px970px
宽屏设备（大桌面显示器）>=1200px1170px

以上都是一些很基础的知识点，稍加理解就可以记住啦。

avatar
文章
阅读
粉丝