移动web开发第一天

第一天

一、适配问题解决方案&＃xff1a;流式布局 &＃43; viewport

1、流式布局

百分比布局&＃xff0c;通过设置盒子的宽度为百分比来根据屏幕的大小进行伸缩&＃xff0c;特点是不受固定像素的限制&＃xff0c;内容向两侧填充

2、viewport

在移动端用来承载网页的这个区域&＃xff0c;就是我们的视觉窗口&＃xff0c;也叫viewport&＃xff08;视口&＃xff09;, 这个区域可设置高度宽度&＃xff0c;可按比例放大缩小&＃xff0c;而且能设置是否允许用户自行缩放。

让浏览器知道设置了viewport&＃xff0c;viewport只在移动端识别

3、viewport 参数

width&＃xff1a;定义viewport的宽度&＃xff0c;有一个特殊值 device-width当前设备的宽度

initial-scale&＃xff1a;默认的初始缩放比

设置1.0&＃xff0c;和PC端页面的显示比例一致&＃xff0c;一比一显示在移动端

user-scalable&＃xff1a;是否允许用户自行缩放 1-yes&＃xff0c;0-no

maximum-scale&＃xff1a;最大缩放比

minimum-scale&＃xff1a;最小缩放比

4、构建标准的移动端web开发页面

快捷键—meta&＃xff1a;vp

二、在写项目要注意的问题

base样式定义&＃xff1a;reset css 重置默认的、浏览器自带的一些样式&＃xff08;所有的标签和伪类&＃xff09;&＃xff0c;目的是保持各种终端显示一致

1、在移动端特殊的设置

①清楚点击高亮效果

-webkit-tap-highlight-color: transparent;

②设置所有的盒子的宽度以边框开始计算

在移动端通常使用的是百分比布局&＃xff0c;那么这样的布局如果使用border或者padding会使容器的宽度超出屏幕的宽度产生滚动条。

-webkit-box-sizing: border-box;

box-sizing: border-box;

③清除input默认的样式

- webkit-appearance: none;

2、最小宽度、最大宽度的限制

min-width&＃xff1a;300px; //适配小屏幕设备&＃xff0c;为了有较好的布局效果。

max-width&＃xff1a;640px;//保证页面在尺寸比较大的设备当中保证页面的效果也就是清晰度

3、物理像素和图标模糊度问题

解决方案&＃xff0c;采用压缩图标尺寸的方式来解决。

如果是Img使用直接设置宽高的方式来压缩。

如果是背景使用的是设置background-size的方式来压缩

4、搜索按钮调用

在移动端调用输入法&＃xff0c;弹出的小键盘enter键会变成搜索按钮

提示" />

5、结构性伪类原则器---同类型选择器

E:first-of-type匹配同类型中的第一个元素E。

E:last-of-type匹配同类型中的最后一个元素E。

E:nth-of-type(n) 匹配同类型中的第n个元素E。