web移动开发

手机内置浏览器：

• Android：Andriod Browser
• IOS：Mobile Safari
• BlackBerry：Webkit
• Symbian S60： Web Browser for S60
  其浏览器的核心都是基于Webkit

智能手机Web浏览器的特点:

• 有限的屏幕尺寸
• 触屏、缩放
• 硬件设备的提升
• 基于Webkit内核

因为手机屏幕尺寸原因，所以在pc端可以展示的很多内容，无法在手机端展示，这时候就需要对手机端的页面进行设计。

以下引用自移动端web页面适配（整理版）

早期网页设计采用静态布局，通过<meta>标签中的applicable-device应用设备标识识别移动设备，即<meta name= 'applicable-device' content = 'mobile'>，在<meta>标签中的viewport标签中设置width，通过js动态修改标签的initial-scale使得页面等比缩放，刚好占满整个屏幕。
一些文章中有提到静态布局中页面各个元素采用px为单位，这种方案实现简单，不存在兼容性问题，但用户体验很不友好。

后面出现流式布局，使用百分比%定义宽度，高度使用px固定，根据可视区域大小实时进行尺寸调整，通常使用max-width/min-width控制尺寸范围过大或者过小。
这种方案实现比较简单，但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。

顺应不同页面字体大小展现问题，出现了弹性布局。这种布局方案下，包裹文字的元素的尺寸采用em/rem为单位，页面主要划分区域的尺寸依据情况使用px、百分数或者em/rem。

上面的这几种方案下，页面元素的大小按照屏幕分辨率进行适配调整，但是整体布局不变，对于响应式web设计，网页布局会随着访问它的视口及设备的不同呈现不同的样式，在实现上可能会以上多种方案的结合，同时搭配 媒体查询 技术使用，使得一个页面在多个终端 (PC, mobile, pad) 呈现满意效果。

meta标签

<meta>标签。

vscode的默认meta标签为：

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

charset指编码方式。
X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的。
name属性主要是告诉搜索引擎，网页的关键字、描述、作者等。
device-width，指设备的宽度。
initial-scale ，指初始的缩放比例 。
minimum-scale ，允许用户缩放到的最小比例 。
maximum-scale，允许用户缩放到的最大比例 。
user-scalable，用户是否可以手动缩放。

开发方式

• 响应式开发方式： 开发一个页面，同时运行在PC端和移动端，针对不同的屏幕大小，来自动适应屏幕，展示对应端的页面的布局。
• 原生的移动web开发方式： 针对每一个端 PC端和移动端，都分别开发1个页面 PC端加载PC端的页面，移动端加载移动端的页面。
  响应式开发效率高，代码量少，但是由于代码都在一个页面里，所以会造成代码冗余，运行效率低。
  原生web开发方式，代码量大，但是针对性强，运行效率高。

三种布局

因为还要准备模块化开发的博客，有点写不过来了，所以这里就简略写一些我的理解……

流式布局

其实就是用百分比写一个网页，在很久以前我写网页是这种写法 ：

效果如下：

缩放以后效果如下：


不管如何缩放，这个框框的占比都是这么大。不过我写的这个太烂了，缩放以后挺丑的。

flex布局

后来听说大多数网站都是用像素而不是用百分比，于是暑假项目我就改成了px的方法，加上了一些弹性布局，感觉是个简单的flex布局吧……
拿我当时的注册页面举例，我都忘了套了多少个弹性盒子了：
（多轴的弹性布局一直没有太明白，正在研究）

学姐之前推荐过的博客→html+css:display:flex属性



因为想象力比较有限加上理解还不透彻，对我来说其实就是这几句颠来倒去地用……

rem布局

html {
font-size: 12px;
}
div {
font-size: 2rem;
}

比如这样，html的字体大小是12px,div是它的两倍，也就是24px。
另外在看网课笔记的时候，都推荐了一个软件叫less。
我的理解就是，如果我频繁地用到一个数值或者颜色之类的，此时less就派上用场。

这些代码里频繁用了各种颜色，如果挨个复制粘贴的话会挺麻烦的，此时用到less变量就会简单很多。

响应式开发的一个简单尝试

以假期培训的导航栏为例，这是一个带下拉菜单（鼠标放上去就会出现这个二级菜单）的很长的导航栏

但是手机屏幕没有这么宽，并且在手机端，hover这种判定实在是太难了，所以需要改很多东西。
首先是css中媒体查询的语法：

@media(条件){
//条件成立执行的代码
}

条件通常有3种写法

width:1200px;//表示屏幕宽度等于1200 条件成立
min-width:1200px;//表示屏幕宽度大于等于1200 条件成立
max-width:1200px;/表示屏幕宽度小于等于1200 条成立

如果有多个条件可以使用 and相连

@media(条件) and (条件2){
//条件成立执行的代码
}

谷歌浏览器最小的宽度是500像素，为了方便展示变化，我会用600像素举例。比如当屏幕宽小于600像素时，就会自动变化成手机端的样式。
比如（@media部分要写在css代码的最后边，否则样式会被后面的覆盖掉）

@media screen and (max-width: 600px){
    body{
            background-color: red;
    }

}

此时当缩小浏览器的大小时，就会出现：

当然，不能用这么丑的样式。
经过我的一番操作，把导航栏大致变成了这样：
（把导航栏隐藏掉，菜单显示出来）

点击菜单以后

点击用户中心以后

手机端实测：（就是有点丑）