移动Web开发基础

Posted 2021-09-25 遥岑.

目录

• 浏览器
• 视口
• • meta视口标签
• Normalize.css初始化默认样式
• 物理像素和物理像素比
• 二倍图
• • 背景图片的缩放background-size
• SVG矢量图
• 移动端开发选择
• • 单独移动端页面
  • 响应式页面
• CSS3盒子模型box-sizing
• 特殊样式

浏览器

浏览器按照设备类型来划分，主要包括PC端浏览器和移动端浏览器。
PC端的浏览器主要包括Google（谷歌）公司的Chrome浏览器、Mozilla公司的Firefox浏览器和Edge浏览器等。
移动端设备主要包括android、ios等手机设备，屏幕尺寸非常多，手机分辨率和大小也不尽相同，碎片化严重。

国内的UC、QQ、百度等手机浏览器都是根据Webkit修改过来的内核，兼容移动端主流浏览器，处理Webkit内核浏览器即可

视口

视口：是浏览器显示页面内容的屏幕区域
视口主要包括布局视口、视觉视口和理想视口，视口能将大分辨率尺寸网页缩小显示在手机浏览器上，保证网页在手机上看起来更像在桌面浏览器中的样子。
布局视口：是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。
视觉视口：是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。
理想视口：是指对设备来讲最理想的视口尺寸。

meta视口标签

在<meta>标签中，将name属性设为viewport，即可设置视口。
在实际开发中，通常会将视口设置为不允许用户缩放页面、视口宽度等于设备宽度、初始缩放比为1.0，最大缩放比为1.0。

<!-- 设置content 通知浏览器布局视口的宽度应该和设备的宽度一致 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

<meta>标签的常用属性：

Normalize.css初始化默认样式

移动端的样式初始化。
在传统的PC端Web开发中，一些旧版本的浏览器不符合W3C标准，有些不支持html5和CSS3的新特性。
在移动Web开发中，几乎不用担心浏览器的兼容问题，因为移动端的浏览器基本上都是以WebKit内核为主，对HTML5和CSS3的支持非常好。

优点：

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

物理像素和物理像素比

物理像素点：是指屏幕显示的最小颗粒，是物理真实存在的，这是厂商出厂时就设置好了的。
PC端和早前的手机屏幕：1CSS像素 = 1物理像素。
我们开发时的1px不是一定等于1个物理像素的。
一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比。

在高分辨率屏幕中，CSS使用的像素单位和屏幕显示的像素并不是一对一的，将屏幕像素除以CSS像素得到的就是设备像素比。为了解决这个问题，高分辨率设备的操作系统会让网页画面进行缩放，让大小看上去比较舒适，而网页中使用的像素也不必修改，尤其是网页中的文字，在高分辨率屏幕下的显示效果会更加细腻
Retina（视网膜屏幕）是一种显示技术，可以把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度

二倍图

由于存在物理像素比，我们将css像素图片再移动端打开时会被放大，图片会变模糊。所以我们提前准备一张大两倍的图片，将他手动缩小放进去，即使被放大也依然是清晰的。我们准备的图片比我们实际需要的大小大二倍，这个方式就是二倍图。
二倍图可以理解为当设备像素比很大时，图片会被放大，而放大会让图片看起来模糊。为此，我们可以使用二倍图的方式来提高图片的清晰度。
通常使用二倍图，但是现在也存在3倍图4倍图的情况，这个看实际开发公司需求。

背景图片的缩放background-size

background-size属性规定背景图像的尺寸。

/*只写一个参数 肯定是宽度 高度不设置 等比例缩放*/
/*也可以写百分比*/
background-size:宽度 高度;
background-size:cover;  /*等比例拉伸 直到完全覆盖 图片可能显示不全*/
background-size:contain; /*当宽度或高度铺满时就不再拉伸了*/

SVG矢量图

网页中的图片可以分为两类，一类是小图标和简单的图形，另一类图片经常使用GIF，JPEG，PNG等格式，这些格式比较常见，但因为都是基于像素处理的，当放大时会失真，变得模糊。
可缩放矢量图形（SVG）是一种开放标准的描述矢量图形的语言，它基于XML（可扩展标记语言）。

移动端开发选择

• 单独制作移动端页面
• 响应式页面兼容移动端

单独移动端页面

通常情况下，网页域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。

响应式页面

响应式页面指的是同一页面在不同屏幕尺寸下实现不同的布局，从而使一个页面兼容不同的终端。
通过判断屏幕宽度来改变样式，以适应不同终端。
响应式开发主要是为了解决移动互联网浏览的问题。

响应式页面的优点：

• 可以跨平台
• 便于搜索引擎收录
• 节约成本

CSS3盒子模型box-sizing

传统盒子模型： 盒子宽度 = CSS中设置的width+border+padding。
CSS3盒子模型： 盒子宽度 = CSS中设置的宽度width包含了border和padding，也就是说padding和border不会撑大盒子了。
移动端可以全部使用CSS3盒子模型；PC端如果完全需要兼容，就用传统模式，不考虑兼容性，就选择CSS3盒子模型。

/*CSS3盒子模型*/
box-sizing:border-box;
/*传统盒子模型*/
box-sizing:content-box;

特殊样式

/*点击高亮清除 设置为透明*/
-webkit-tap-highlight-color:transparent;

/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance:none;

/*禁用长按页面时弹出菜单*/
-webkit-touch-callout:none;