web移动开发

2021/9/14 23:06:03

本文主要是介绍web移动开发,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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移动开发的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程