15day-移动端知识

像素知识点

物理像素

每个屏幕都是由一个个像素方块组成，这些像素方块被称为物理像素，也叫设备像素

css像素

css中书写样式时的像素他也叫逻辑像素，也可以叫做设备的独立像素

移动端调试方式

• 浏览器的模拟手机调试模式
• 搭建本地的web服务器，利用局域网就可以使手机访问服务器上的页面（手机访问我们在电脑上写的页面）
• 利用外网服务器（不是梯子，是我们将自己的网页上线部署到自己的服务器），直接通过域名进行访问。

viewport 视口

浏览器显示网页内容的屏幕区域就叫做视口，分为布局视口、视觉视口、完美视口

布局视口

一般浏览器都会设置一个布局视口，用于解决早pc端页面在手机上显示问题，ios、android基本都将这个视口分辨率设置为980px宽，所以pc网页在手机上显示时，内部的元素看起来会很小。

视觉视口

就是我们手机屏幕能看到的区域就是我们的视觉视口

完美视口（理想视口）

为了使网站在移动端有最理想的浏览和阅读宽度而设定，使布局视口和视觉视口宽度保持一致。需要手动设置。

设置视口 （设置meta）

通常情况下，viewport有一下六种设置。

• width：定义布局视口宽度，单位为像素
  取值：正整数或device-width：设备独立像素宽度
• height：定义布局视口高度，单位为像素
  取值：正整数或device-height：设备独立像素高度
• initial-scale：定义初始缩放值
  • 取值：0.0-10.0
• minimum-scale：定义缩小最小比例，他必须小于或等于maximum-scale设置的值
  • 取值：0.0-10.0
• maximum-scale：定义放大最大比例，他必须大于或等于minimum-scale
  • 取值：0.0-10.0
• user-scalable：定义是否允许用户手动缩放页面，默认为yes

<meta name="viewport" content="width=device-width , initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

总结

在移动端，无论你为viewport设置宽多少，如果没有指定默认的缩放值，则移动端浏览器会自动计算这个缩放值，以达到当前页面不会出现横向滚动条。（或者说，viewport的宽度就是屏幕的宽度）

移动开发技术选型和方案

移动端主流方案

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

• 通常情况下，网址域名前可加个m来打开移动端页面
  • 可以通过js的api来获取浏览器的信息，判断是否为移动端进行跳转到移动端页面。

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

移动端特殊样式

/* 清除点击高亮 */
-webkit-tap-hightlight-color:transparent;

/* 某些版本ios加上这个属性才能给按钮或输入框自定义样式 */
-webkit-appearance:none;

/* 禁用长按页面时弹出的菜单 */
img,a{
  -webkit-touch-callout:none;
}

移动端常见布局方式

移动端单独制作

• 流式布局（百分比布局）
• flex布局（推荐）
• vw/vh布局
• rem+媒体查询布局

响应式

• 媒体查询

rem

是一个相对单位，rem单位始终基于根元素（html）的字体大小计算。由于父元素的字体大小可能不一致，所以em单位用于布局，被淘汰了，但是html根元素只有一个。所以可以利用这个特性以html字体大小为基准，控制整个页面的大小。

媒体查询

可以根据不同的设备，不同尺寸对页面元素设置不同的样式，分别适应移动端、pc端等。页面会根据媒体查询设定的宽度来重新布置样式。

语法：

@media 媒体类型 连接符 (媒体特征){
  css-code
}

媒体类型

• all：用于所有设备
• screen：用于电脑、手机、平板等设备
• print：用于打印机或打印预览
• speech：用于屏幕阅读器等发声设备

连接符（逻辑运算符）

将多个媒体类型或特征连接起来作为媒体查询的条件

• and：“且”，可以将多个媒体特性连接起来（和）
• not：排除某个媒体特性“非”
• only：指定某个特性的媒体类型

媒体特性

• width：定义输出设备页面中的可视宽度
• min-width：定义最小可视宽度
• max-width：定义最大可视宽度
• orientation
  • portrait：竖屏，即高度大于宽度
  • langdscape：横屏，即高度小于宽度

书写规则

• 如果判断的是最小值（min-width），那么就应该从小往大写
• 如果判断的是最大值（max-width），那么就应该从大往小写。

实战实例

确定设计稿的切分份数

通常情况下，我们以iphone678尺寸作为标准，设计提供一份2倍像素的设计稿，也就是750宽的设计稿

通常情况我们将它分成10份或20份。

以10分为例

750px ==》html的font-size = 750 / 10 = 75px
720px ==》html的font-size = 720 / 10 = 72px
一次类推
320px ==》html的font-size = 7320 / 10 = 32px

计算设计图内元素的尺寸 换成rem单位

html的font-size = 设计图宽度/划分份数

设计图内元素尺寸 = 元素在设计图上的尺寸 / html的font-size

flexible插件

网址：https://github.com/amfe/lib-flexible/blob/2.0/index.js
只做了一件事，就是根据屏幕宽度，将屏幕宽度分为10份，之后设置html的font-size。
之后再配合一个插件 px to rem
这个插件可以帮我们把当前页面元素中的px单位换算成rem单位（但要在设置中设置设计稿的宽度和基准font-size）

vw\vh布局

vw、vh单位
都是相对于屏幕的相对单位，把屏幕分为100份

元素尺寸计算公式

元素的vw = 元素在设计图中的尺寸 / 设计稿的总宽 * 100

使用scss函数计算

@function getvw($w){
  @return $w / 750 * 100 + vw
}