---

前言

开始学习移动web开发基础

---

一、浏览器

1.pc端常见浏览器

360、谷歌、火狐、QQ、百度、搜狗、IE。

2.移动端常见浏览器

UC、QQ、欧朋、百度、360、谷歌、搜狗、猎豹以及其他杂牌浏览器。
常见移动端尺寸：

移动端浏览器主要对webkit内核进行兼容。

二、视口

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

1.布局视口layout viewport

pc端的页面被压缩。

2.视觉视口visual viewport

网站的区域。用户正在看到的网站的区域。

3.理想视口ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定。
meta视口标签主要目的是：布局视口的宽度应该与理想视口的宽度是一致的（设备有多宽就让布局视口有多宽）

三、二倍图

1.物理像素和物理像素比

物理像素：屏幕显示的最小颗粒，是物理真实存在的。
物理像素比：一个px能显示的物理像素点的个数。

2.二倍图用法

在标准的viewport设置中，使用倍图来提高图片的质量，解决在高清设备中的模糊问题。通常使用二倍图，还存在三倍图和四倍图。（看实际开发公司需求）。

四、移动端开发选择

1.单独制作移动端页面

网址域名前面加m可以打开移动端，通过判断设备，如果是移动设备打开，则跳到移动端页面。

2.响应式兼容pc移动端

响应式网站：即pc和移动端共用一套网站，只不过在不同宽度屏幕下，样式会自动适配。
缺点：制作麻烦，需要花费很大的精力去调兼容性问题。

3.移动端常见问题技术解决方案

（1）浏览器，移动端基本以webkit内核为主，因此我们考虑webkit兼容性问题。
（2）css初始化，推荐使用normalize.css，可以定制css文件，让不同的浏览器在渲染网页元素的时候形式更统一。
优点：保护了有价值的默认值；
修复了浏览器的bug，解决了浏览器的不一致的默认样式；
normalize.css是模块化的，提高了易用性；
normalize.css拥有详细的文档。
官网地址
（3）css3盒子模型box-sizing
添加了width和height后，再添加border，padding，margin就会自动内减。

<!-- 传统盒模型 -->
box-sizing: content-box;
<!-- css3盒模型 -->
box-sizing: border-box;

五、移动技术选型

1.单独制作移动端页面

（1）流式布局（百分比布局）
（2）flex弹性布局（强烈推荐）
（3）less+rem+媒体查询布局
（4）混合布局

2.响应式兼容pc移动端

（1）媒体查询
（2）bootstrap框架

---

总结

今天了解了视口，倍图，移动技术等知识点，为移动端页面制作打下基础，每天坚持学习前端，加油~