前端基础-移动web开发-基础知识(一)_web 开发移动端需要学什么csdn

---

移动端基础

移动端浏览器

国内移动端浏览器内核是根据webkit修改过来的，国内尚无自主研发的内核，主要对webkit内核进行兼容。

移动端调试方法

打开谷歌浏览器的开发者工具，点击下图按钮即可进入移动端开发

视口

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

布局视口

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口

用户正在看到的网站区域，，这个区域的宽度等同于移动设备的浏览器窗口的宽度。可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

理想视口

• 为了使网站在移动端有最理想的浏览和阅读宽度
• 需要手动添写meta视口标签通知浏览器操作
• meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致
  meta视口标签

标准viewport设置

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

二倍图

• 物理像素：分辨率
• 物理像素比：一个px能显示的物理像素点的个数；
• 视网膜屏幕（Retina）：把更多的物理像素点压缩至一块屏幕里
• 多倍图：比原来尺寸像素大多倍的图片
• background-size: 宽度和高度（如果只写一个参数，会作为宽度等比例缩放）、百分比、cover（完全覆盖）、contain（将图片高度宽度等比例拓展到最大，当高度或宽度铺满盒子就不再拉伸）；

移动端开发选择

- 单独制作移动端页面（主流）
通常网址域名前面添加m（mobile）可以打开移动端
- 响应式页面兼容移动端
通过改变屏幕宽度来改变样式，以适应不同终端

移动端技术解决方案

移动端浏览器基本以webkit内核为主，考虑wenkit兼容性问题，可以放心使用H5标签和CSS3样式。

• CSS初始化：normalize.css
• CSS盒子模型
  box-sizing: border-box CSS3盒子模型，不会撑大盒子（标准盒模型）
  box-sizing:content-box 传统盒子模型（怪异盒模型）

移动端常见布局

移动端技术选型
- 单独制作移动端页面

• 流式布局（百分比布局）
• flex弹性布局
• less+rem+媒体查询布局
• 混合布局

- 响应式页面兼容移动端

• 媒体查询
• bootstrap

---

总结

上述知识是移动端web开发的入门知识，后续会有详细的教程介绍常见布局方法。