移动开发web第一天

Posted 2020-10-23

一、适配问题解决方案：流式布局 + viewport
1、流式布局
百分比布局，通过设置盒子的宽度为百分比来根据屏幕的大小进行伸缩，特点是不受固定像素的限制，内容向两侧填充
2、viewport
在移动端用来承载网页的这个区域，就是我们的视觉窗口，也叫viewport（视口）, 这个区域可设置高度宽度，可按比例放大缩小，而且能设置是否允许用户自行缩放。
<meta name = "viewport">让浏览器知道设置了viewport，viewport只在移动端识别
3、viewport 参数
width：定义viewport的宽度，有一个特殊值 device-width当前设备的宽度
initial-scale：默认的初始缩放比
设置1.0，和PC端页面的显示比例一致，一比一显示在移动端
user-scalable：是否允许用户自行缩放 1-yes，0-no
maximum-scale：最大缩放比
minimum-scale：最小缩放比
4、构建标准的移动端web开发页面
<meta name = "viewport" content = "width = device-width,initial-scale = 1.0, user-scalable = 0">
快捷键—meta：vp
二、在写项目要注意的问题
base样式定义：reset css 重置默认的、浏览器自带的一些样式（所有的标签和伪类），目的是保持各种终端显示一致
1、在移动端特殊的设置
①清楚点击高亮效果
-webkit-tap-highlight-color: transparent;
②设置所有的盒子的宽度以边框开始计算
在移动端通常使用的是百分比布局，那么这样的布局如果使用border或者padding会使容器的宽度超出屏幕的宽度产生滚动条。
-webkit-box-sizing: border-box;
box-sizing: border-box;
③清除input默认的样式

• webkit-appearance: none;
  2、最小宽度、最大宽度的限制
  min-width：300px; //适配小屏幕设备，为了有较好的布局效果。
  max-width：640px;//保证页面在尺寸比较大的设备当中保证页面的效果也就是清晰度
  3、物理像素和图标模糊度问题
  解决方案，采用压缩图标尺寸的方式来解决。
  如果是Img使用直接设置宽高的方式来压缩。
  如果是背景使用的是设置background-size的方式来压缩
  4、搜索按钮调用
  在移动端调用输入法，弹出的小键盘enter键会变成搜索按钮
  <form action = "#">
  <input type = "search" placeholder = "提示" />
  </form>
  5、结构性伪类原则器---同类型选择器
  E:first-of-type匹配同类型中的第一个元素E。
  E:last-of-type匹配同类型中的最后一个元素E。
  E:nth-of-type(n) 匹配同类型中的第n个元素E。