【博学谷学习记录】超强总结，用心分享|移动端特点

十月初金秋，国庆迎欢腾。大家好，不知道大家国庆假期过的怎么样，愿祖国繁荣昌盛的同时也祝我们生活繁花似锦，今天来分享一些关于移动端网页的特点。

       首先让我们来想一想PC端网页和移动端网页的有什么不同之处？又如何在电脑里面边写代码边调试移动端网页效果？

 PC端网页屏幕大，网页固定版心，浏览器繁多，更多考虑兼容性问题。（布局： 浮动+定位+标准流）；手机屏幕小， 网页宽度多数为100% ，移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性。

，一般都在谷歌模拟器里调试代码效果。

谷歌模拟器

屏幕尺寸指的是屏幕对角线的长度，一般用英寸来度量 。

分辨率

PC端网页分辨率：1920 * 1080 ，1366 * 768  ……

缩放150%  （1920/150%）*（1080/150%） 

分辨率分类 

物理分辨率是生产屏幕时就固定的，它是不可被改变的，硬件所支持的，屏幕出厂就设定无法修改。

逻辑分辨率是软件可以达到的， 我们开发中写的是逻辑分辨率。

了解移动端主流设备分辨率

比较常用的是iPhone6/7/8。

视口

 目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页。

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

理想视口。 设备有多宽，我的网页就显示有多宽。

布局视口 。 iOS, Android基本都将这个视口分辨率设置为980px。

手机屏幕尺寸都不同， 网页宽度为100% 。

 网页的宽度和逻辑分辨率尺寸相同。

默认情况下，网页的宽度和逻辑分辨率不同， 默认网页宽度是980px。

目标：网页宽度和设备宽度(分辨率)相同。

解决办法：添加视口标签。

视口：显示HTML网页的区域，用来约束HTML尺寸。

viewport：视口

width=device-width：视口宽度 = 设备宽度

initial-scale=1.0：缩放1倍（不缩放）

二倍图 

目标：能够使用像素大厨软件测量二倍图中元素的尺寸。图片分辨率, 为了高分辨率下图片不会模糊失真。

l 现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。

l 二倍图设计稿尺寸：750px。

 关于移动端网页特点就分享这些啦，祝大家在这个国庆假期玩的开心，谢谢大家！