1 .移动终端基础1.1典型移动终端屏幕大小
1.2移动端开发3358www.Sina.com/由移动端开发移动端浏览器主要面向手机侧开发与webkit内核兼容的移动端开发，pad屏幕大，PC端互联使用分辨率和屏幕大小不同的谷歌浏览器模拟手机界面，2 .视口2.1布局视口layout viewport移动设备浏览器默认设置布局视口，初始PC
与iOS、Android一起，将此视口的分辨率设置为980像素。 (PC端的网页通常为1000左右，所以几乎都能显示。 )通常包含编写移动端的网页)，通常可以在缺省情况下手动缩放。
2.2可视视口visual viewport用户看到的元素看上去很小
可以缩放以操作视觉视口，但不影响布局视口。 布局视口保持其原始宽度。
2.3理想视口ideal viewport手动添加元视口标签，以设置向浏览器通知元视口标签操作的主要目的，从而使网站移动端具有最理想的阅读和阅读宽度。 设备有多宽，我们布局的视口宽度设置为网站的区域太宽(980像素，手机屏幕太窄)。 两者不一致的最好方法是将总结：开发时使用理想视口，理想视口是将布局视口的宽度修改为视觉视口即布局视口的宽度 修改为 视觉视口。 2.4元标记语法：
元数据=' viewport ' content=' width=device-width，user-scalable=no，initial-scale=1.0，minimum-scale=
对于具有匹配宽度和设备的width=device-width视口的initial-scale=1.0视口的默认缩放1.0用户- scalable=no，最小-scale=1.0允许的最小比例
3.1物理像素、物理像素是比物理像素更小的粒子，也就是屏幕上的最小粒子，物理上存在。 所谓物理像素是指分辨率，例如，如果分辨率为750*1344，则一行可以将750个像素点置于PC侧上，其中一个像素等于一个物理像素，但在移动侧上不一定是http://www.Sina.com/IPP
3.2倍图电脑和手机的屏幕尺寸还存在差异，不能像PC端那样1px=1个物理像素点
因为手机的画面很小，所以如果他的物理像素比为1:1，就不能显示像PC侧的画面尺寸那样的网页
那么，必须在移动侧的有限空间中压缩更多的物理像素，即Retina (视网膜屏幕)
视网膜是一种通过将更多物理像素点压缩到单个屏幕上来实现更高分辨率和提高屏幕细度的技术
如下图所示
如何使用该技术将该技术应用于图像，利用两倍的图像，压缩图像，然后达到更高的分辨率，提高图像质量。
例如，一张图像在PC端显示为100100，但在移动端显示为模糊。 这样我们手动将这个图像缩小到5050，图像清晰，我们需要的图像比我们实际的图像小两倍，这个方式是双倍图。
在这种情况下，必须使用背景缩放属性
3.3背景缩放背景大小属性确定背景图像的大小
后台大小： width height； 单位：长度百分比
cover将背景图像扩展到足够大的尺寸，以使背景图像完全覆盖背景区域。 (将布局的宽度与手机屏幕宽度保持一致)
contain将图像扩展到最大大小，以使图像的宽度或高度完全适合内容区域。 (一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比)
4 .移动端技术解决方案4.1移动端特殊风格/*CSS3盒装机型*/box-sizing: border-box； 维基盒子-尺寸： border-box； /*若要单击高亮显示以将其清除，请单击transparent中设置的透明度*//-WebKit-tap-highlight-color : transparent； */- WebKit-appearance :否；/* a {-WebKit-touch-callout 3360 none，禁用长按页面时的弹出菜单*/img； (4.2移动技术解决方案1 .移动浏览器兼容性问题
由于移动浏览器基本上以webkit内核为中心，因此我们将考虑webkit兼容性。
我们可以放心地使用H5标签和CSS3样式。
浏览器的专用前缀只是考虑添加webkit
2 .移动端公共风格
要初始化移动CSS，请访问normalize.css/
Normalize.css :保护了有价值的默认值
Normalize.css :修复了浏览器中的错误
Normalize.css :模块化的
Normalize.css :有详细的文档
官网： http://neco las.github.io/normalize.CSS /
5 .移动端常见布局(1)移动端单独流媒体布局(百分比flex布局)等比例拉伸，完全覆盖，会有一边超出) rem布局less媒体查询混合布局) 2