标签：web 缩放 布局 width 开发 屏幕 移动 页面

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;
    }

}

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

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

点击菜单以后

点击用户中心以后

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

标签：web,缩放,布局,width,开发,屏幕,移动,页面
来源： https://blog.csdn.net/gwhfamily/article/details/120188646

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。