移动web 01

二倍图的概念

二倍图就是设计人员在设计ui图的时候是参照手机的二倍来设计的

二倍图的作用：防止图片失真

####移动端调试的两种方法

• 模拟调试：用电脑的浏览器模拟手机端
• 真机调试
  • 手机和电脑必须在同一个网络下
  • 将页面以live server的形式打开
  • 打开运行cmd输入ipconfig查找到无线局域网的wlan ipv4地址将ip地址复制之后将浏览器中的127.0.0.1替换掉
  • 将地址用二维码生成器生成二维码，然后手机扫一扫即可

视口

视口就是用来承载网页内容的部分，也就是用户看见的展示区域

视口是由苹果推出来

内容是放在视口里面，内容的宽度也就是参照与视口，并不是参照与浏览器的窗口

• pc端视口的大小：默认和浏览器的可视区域一样大
• pc端视口的特点：
  • 内容的宽度超过视口的宽度会出现滚动条
  • 如果内容的宽度为100%；但是内容的子元素超过了父元素的宽度，会自动换行
  • 如果内容的宽度为100%，子元素的宽度为百分比，并且这个百分比没有超过100%，就会同比例缩放
  • pc断的视口没有什么太大作用，因为pc端视口和浏览器的可视区域一样大
• 移动端视口默认大小以及原因
  • 移动端的默认视口：一般是980
  • 为什么移动端视口为980：因为以前pc端的内容版心为960，苹果为了解决pc端的网页能够在手机端显示出来，所以将手机端的视口为980
  • 默认为980如果是PC端的网页在手机端显示没有问题，无非就是被缩放了
  • 默认为980如果网页是移动端，不是很好
• 移动端视口会出现什么问题？
  • 移动端出现的问题：内容缩放
  • 原因：内容的宽度参照视口，视口的宽度980，苹果5宽度320，将980的内容放到320的手机上自然缩放
• 怎么解决这不不合理的问题？
  • 将布局视口的大小修改成手机屏幕大小即可
• layout viewport：布局视口，默认视口
• ideal viewport：手机屏幕大小

利用meta标签设置视口

• name：viewport，就是来设置当前meta标签是设置视口的，并且只在移动端起作用
• content=“width=device-width”：content里面的width就是设置视口的宽度，应该设置成device-width
• content=“initial-scale=1”：设置layout viewport：ideal viewport 1：1 适口：屏幕，为了兼容
• user-scalable：yes/no,设置页面是否能够用手指捏合进行缩放
• minimum-scale：最小缩放比
• maximum-scale：最大缩放比
• 注意用vscode生成的页面，没有user-scalable，自己要追加上

移动端浏览器

移动端主要可以分成三大类，系统自带浏览器、应用内置浏览器、第三方浏览器

系统浏览器：指跟随移动设备操作系统一起安装的浏览器。

应用内置浏览器：通常在移动设备上都会安装一些APP例如QQ、微信、微博、淘宝等，这些APP里往往会内置一个浏览器，我们称这个浏览器为应用内置浏览器（也叫WebView），这个内置的浏览器一般功能比较简单，并且客户端开发人员可以更改这个浏览器的某些设置，在我们理实的开发里这个浏览器很重要。

第三方浏览器：指安装在手机的浏览器如FireFox、Chrome、360等等

• 移动端站点的共同之处：搜索框、轮播图、导航、产品信息，就是因为手机端比较小

/*去除移动端特有的点击高亮效果*/
-webkit-tap-highlight-color: transparent;

头部结构实现的三种方式

• flex

  左边宽度固定，右边也是宽度固定，中间给flex:1

• padding

  中间的元素设置宽为100%；padding:0 100px;默认是向外撑开，所以要设置盒模型，padding就会向里面撑开

  两边的元素利用定位来实现

• margin

  中间元素，自动计算宽度，margin:0 100px;

  两边定位上去

• 左边的logo：background-position: 0px -108px;

• 放大镜：background-position: -56px -108px;

  ​