移动端笔记（一）

用户1245352231132
205 阅读7分钟

一、基础了解

1.视口标签

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度 一致，简单理解就是设备有多宽，我们布局的视口就多宽

<meta name=viewport content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
  • Width属性，用来设置视口的宽度 ，device-width： 设备屏幕的输出宽度
  • initial-scale 初识缩放比 1.0
  • maximum-scale 最大缩放比 1.0
  • minimum-scale 最小缩放比 1.0
  • user-scalable 用户是否可以进行缩放 yes/no

2.二倍图

  • 物理像素 和 物理像素比

    • 物理像素：设备屏幕实际拥有的像素点，屏幕的基本单元，是有实体的。
    • 物理像素比=物理像素/css像素

    通俗讲：

    1. pc页面，1px就是一个物理像素，但是移动端不尽相同（因为retina高清图的出现改变了dpr值不再是1）。
    2. 一个px能显示的物理像素点的个数，就是物理像素比

  • 为什么要二倍图？

    因为图片宽度如果写死在手机端打开会放大两倍（甚至三倍，看手机分辨率），造成图片模糊。所以开发中一般把图片先放大两倍，再到代码中缩放，使图片清晰。

    二倍精灵图做法：

    1.在firework里面把精灵图等比例缩放为原来一半，

    2.量坐标，

    3.background-size也要改为精灵图原来宽度的一半。

    在移动端，写一张背景图为50px（实际图片100px）宽高：

    div{ width:50px; height:50px; background:url(./img/1.jpg) no-repeat; background-size:50px 50px; }

  • background-size

    • background-size:50px; 等比例缩放
    • background-size:50%; 相对于父盒子来说
    • background-size:cover; 等比例拉伸，要完全覆盖div盒子
    • background-size:contain; 高度宽度等比例拉伸，当宽或高铺满div盒子就不再拉伸，可能会有部分空白区域

  • box-sizing:border-box|content-box;

    • box-sizing:border-box css3盒模型

3.移动端开发选择

移动端开发的两种选择：

1.单独制作移动端页面（主流）

2.响应式布局（其次）

4.移动端技术解决方案（默认样式清除等）

5.移动端常见布局

  1. 单独制作移动端页面（主流）
    1. 流式布局（百分比布局）
    2. flex布局（推荐）
    3. less+rem+媒体查询布局
    4. 混合布局
  2. 响应式布局（其次）
    1. 媒体查询
    2. bootstrap

二、流式布局（京东）

三、flex布局（携程）

四、rem+less+媒体查询|rem+flexible（苏宁）

1.什么是rem

rem是一个相对单位，相对于html的字体大小。如果整个页面很多地方用rem进行布局，只需要在不同屏幕下修改html字体的大小，那么整个页面都会同步变化

公式：页面元素的rem值 = 页面元素的px值 / （屏幕宽度 / 划分的等份）

  1. 首先确定设计稿的尺寸 （一般以750px为准）
  2. 计算html的font-size：屏幕宽度/划分等份。因为屏幕宽度是动态的，所以html的font-size也是动态的
  3. 计算页面元素的rem值：页面元素在750像素下的尺寸 / html的font-size
js计算

公式：（屏幕宽度/设计图宽度） *（设计图宽度/设计图的总分成）

最终：页面元素的rem值 = 页面元素值(px) / html的font-size

可以参考此链接

通过js读取屏幕宽度（clientWidth），然后计算出对应的尺寸并设置根元素的font-size

const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 我们把它设计稿划分为16等份，那么320px屏幕下 1rem = 320px/16 = 20px
// 其他屏幕html的font-size = width/320px * 320px/16 
oHtml.style.fontSize = 20 * (width / 320) + "px";

优点：100%适配所有的机型宽度

注意：既然是JS代码，为了避免造成因为动态设置<html>元素的font-size而造成页面抖动，一般这部分代码我们放在header底部去加载，并内联到html文档里面。

2.媒体查询

css3语法，可以实现根据不同屏幕适配不同的样式

@media 媒体类型 逻辑运算符 (媒体功能){...}

媒体类型：all print screen aural

逻辑运算符：and not only

媒体功能：通常使用width

更多请戳这里了解

根据屏幕宽度设置html元素的字体大小：

@media screen and (min-width: 375px){
    html {
        font-size: 14.0625px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13.5px;
    }
}
@media screen and (min-width: 320px){
    html {
        font-size: 12px;
    }
}
html {
    font-size: 16px;
}

写法一：

/*.css*/
/*
*	screen 主要用于屏幕
* and 将媒体功能与媒体类型结合在一起
* max-width:800px 定义媒体功能 也可以用 width <= 800px
*/

@media only screen and (max-width:1024px){...}

写法二：

<!-- .html -->
<link rel="stylesheet" href="style320.css" media="screen and
(min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and
(min-width: 640px)">

媒体查询4级语法：

原来：

@media (min-width: 30em) and (max-width: 50em) { ... }

现在：

@media (30em <= width <= 50em ) { ... }

注意：

1.max-width 是 <= ; min-width 是 >=

2.这里写的宽度是css像素，不是物理像素。也就是说i6物理像素750px，css像素是375px。这里要写375px才对。

3.less

less：css预处理器。在css基础之上，引入了变量，Mixin（混入），运算以及函数等功能

1.less的安装

安装node，然后npm install -g less

2.使用

新建.less文件

1.less变量
@变量名：值；
2.less编译
  • vscode less 插件 -> Easy LESS
    • 保存less文件会自动生成css文件
3.less嵌套
.dad{
  width:100px;
  height:100px;
  
  .son{
    color:red;
    
    &:hover{
      color:orange;
    }
  }
}

注意：如果有交集/伪类/伪元素选择器，则在前面添加&

4.less运算

注意：

  • 运算符中左右有个空格隔开
  • 对于两个不同单位的值运算，取第一个值单位
  • 如果两个值只有一个有单位，则取该单位

4.flexible.js的使用

flexible.js是淘宝团队出的移动端适配库，把设备划分成10等份。我们只需要确定当前设备（设计稿尺寸）的html文字大小就可以了，比如当前设计稿为750px，只需要把文字大小设置成 75px (750px/10)就可以，页面元素rem值：页面元素的px值/75

剩余的让flexible去计算处理就行

1.去github下载

2.在项目中引入
3.vscode插件的px转rem -> cssrem
  • 插件默认的html文字大小 cssroot 16px 所以1rem = 16px
  • 在设置里面设置rem↓

五、bootstrap响应式布局

六、知识补充

1.图片与文字默认是基线对齐，开发时一般要设置图片与文字居中对齐，vertical-align：middle；

img{
	vertical-align:middle;
}

2.子盒子添加margin-top会影响到父盒子，给父盒子添加overflow：hidden;即可解决。

.box_father{
	overflow:hidden;
}
.box_son{
	margin-top:5px;
}

3.弹性布局（利用margin和width）：左右盒子固定宽度，中间盒子自适应，加上-margin左右，width：100%；

4.弹性布局（flex）：左右盒子固定宽度，中间flex：1；

5.css3知识扩展：背景线性渐变

语法：background：-webkit-linear-gradient（起始位置，颜色1，颜色2）；

起始位置默认值为top

6.rem单位的理解

​ 1.em相对于父元素的字体大小

​ 2,rem相对于html元素的字体大小

​ 3.rem的优点就是可以通过修改html的字体大小来改变页面中元素的大小，可以得到整体控制

7.媒体查询的引入资源：针对不同的屏幕尺寸，调用不同的css文件，在link标签加上media属性

8.less可嵌套使用：1.子元素直接添加到父元素选择器里面。2.伪类需要在前面加上&。

9.font-size = 屏幕大小/划分的等份(10/15/20)；

rem = 实际宽度/font-size

10.媒体查询定的屏幕尺寸是和css像素相关，而不是手机的物理像素

11.@import ‘common’；

@import导入的意思，可以把一个样式文件导入到另一个样式文件中使用。

link 是把样式文件引入到html页面里面。

avatar
文章
阅读
粉丝