移动端-知乎日报

移动端知识点

物理像素

别名：

  • 设备像素
  • 设备物理像素

    设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了。

设备屏幕实际拥有的像素点，屏幕的基本单元，是有实体的。
比如：电脑的像素19201080，是指宽度方向有1920个像素点，高度方向有1080个像素点；
image.png
iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有7501334个像素点。

逻辑像素

别名：

  • 设备独立像素(device-independent pixel)
  • CSS像素

    浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是px，px是一个相对单位，相对的是设备物理像素(device pixel)，其相对性体现在在同一个设备上或在不同设备之间每1个px所代表的物理像素是可以变化的

在浏览器可以通过window.screen.width;window.screen.height获取设备独立像素(逻辑像素)的宽高。

设备像素比DPR

设备像素比=设备的物理像素/逻辑像素
一般PC端的DPR为1，移动端一般为2或3。

  • 在PC端，设备像素比为1：也就是说设备像素(物理像素)===逻辑像素
  • 在移动端，以iphone6为例，DPR为2，物理像素宽2，高2 才是css像素，也就是说1个css像素包含4个物理像素点

设备像素比可以通过window.devicePixelRatio来获取
image.png
比如：iPhone6，逻辑像素是375667，但物理像素是(3752)(6672)====>750*1334，而设计稿一般是根据物理像素的大小来设计的。

在移动端绘制1px

最常用，兼容最好的方法设置transfrom:scale(0.5)

扩展阅读-在移动端绘制1px的几种方法 扩展阅读-作为前端，你应该了解的分辨率/逻辑像素/物理像素/retina屏知识

视口viewport

在PC端只有一个视口概念，就是页面的可视窗口。
但在移动端有三个视口：

  • 布局视口（Layout Viewport）
  • 视觉视口（Visual Viewport）
  • 理想视口（Ideal Viewport）

    当前页面缩放值为1时，视觉视口与理想视口相等

image.pngimage.png
布局视口的宽度/高度可以通过document.documentElement.clientWidth / Height获取。
默认的布局视口宽度为 980px。

视口的设置

我们可以使用视口元标签（viewport meta 标签）来进行布局视口的设置。

  • width=device-width 布局视口=视觉视口
  • viewport 只对移动端有效
    1. <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">
    content中常用属性：
属性名 取值 描述
width 正整数或device-width 定义视口的宽度，单位为像素
height 正整数或device-height 定义视口的高度，单位为像素，一般不用
initial-scale [0.0-10.0] 定义初始缩放值 默认1 正常比例
minimum-scale [0.0-10.0] 定义放大最大比例，它必须小于或等于maximum-scale设置
maximum-scale [0.0-10.0] 定义缩小最小比例，它必须大于或等于minimum-scale设置
user-scalable yes / no 定义是否允许用户手动缩放页面，默认值 yes

有几点值得注意：

  • viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的
  • 当缩放比例为 100% 时，dip[设备独立像素] 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度
  • 单独设置 initial-scale 或 width 都会有兼容性问题，所以设置布局视口为理想视口的最佳方法是同时设置这两个属性
  • 即使设置了 user-scalable = no，在 Android Chrome 浏览器中也可以强制启用手动缩放

    移动端常用单位

    vw/vh/rem/%/calc计算

    vw/vh

    1vw = 1%屏幕宽度；100vw = 100%屏幕宽度
    1vh = 1%屏幕高度；100vh = 100%屏幕高度

    rem

    1rem = html的font-size值
    比如：默认的HTML的font-size:12px，1rem=12px。
    通常为了计算方便，我们将html设置font-size:100px，也就是1rem=100px;
    rem适配代码：
    image.png
    ~ function anonymous() {
//=>根据当前设备的宽度，动态计算出rem的换算比例，实现页面中元素的等比缩放
let computedREM = function () {
  let winW = document.documentElement.clientWidth,
      desW = 640;//这里是设计稿的大小
  document.documentElement.style.fontSize = winW / desW * 100 + 'px';
}
computedREM();
window.addEventListener('resize', computedREM);
}();

    calc

    可以计算两个不同单位的数值
    div {
width: calc(100% - 20px);
//注意减号两边必须加空格
}

    LESS/SASS

    扩展阅读-less学习
    是css的预编译语言，其他：sass/scss 、stylus 等

    嵌套

    ```css / css中不支持选择器中嵌套选择器 / body { font-size:20px; } body div { background: #ccc; }

/ less可以，编译成CSS就是上面的写法 / body { font-size:20px; div { background: #ccc; } //表示body的子元素中有head类名的（不是所有后代，只有子元素）

.head{ } } ```

&符号用法

```less / css中写伪类选择器 / div { background: #ccc; } div:after { content: ‘’; color: red; } div:hover { background: #222; }

/ less中的简便写法，&就代表外层嵌套的选择器 / div { background: #ccc; &:after { content: ‘’; color: red; } &:hover { background: #222; } /表示div.box;/ &.box{ color:#000; } }

<a name="B7jiK"></a>
### 变量
```less
//定义变量
@color:red;

div {
  //使用变量
    color: @color;
}

项目开发

https://www.baidufe.com/fehelper/index/index.html

接口文档

接口 描述 参数 返回数据
/api/swiper 首页轮播图数据 无 [ 
    {


img: ‘http://zhihudaily.me/static/img/pic/20210503/9735624.jpg’,
title: ‘中国有哪些非常唯美漂亮的桥梁？’,
author: ‘星球研究所’,
}
] | | /api/articleList | 首页文章列表 | date:格式 YYYY-MM-DD，如2021-05-21 | [ {
img: ‘http://zhihudaily.me/static/img/pic/20210519/9736141.jpg’,
title: ‘公司严重缺人几乎要乱套了，为什么老板招聘条件还那么苛刻’,
author: ‘小红拖拉机’,
des: 4,
}
] | | /api/article | 文章内容 | id | |

安装依赖

用到了jquery swiper axios
npm i jquery swiper axios
image.png