移动端web开发

相关阅读:
WebApp与Native App的区别?
在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP;一种是基于高端机的浏览器运行的WebApp(基于WEB形式的应用程序)
Native App:
1、开发成本非常大一般使用的开发语言为JAVA、C++、Objective-C
2.能调用系统的 api 优点是性能更好,实现的一些非常酷的交互效果,但是发布 app 流程繁琐,而且不跨平台。
3.更新体验较差(每一次发布新的版本,都需要做版本打包,且需要用户手动更新)
Web App:
1、开发成本较低
使用web开发技术就可以轻松的完成web app的开发
2、升级较简单
升级不需要通知用户,在服务端更新文件即可,用户完全没有感觉
3、维护比较轻松
和一般的web一样,维护比较简单
优点是跨平台,修改方便缺点是不能调用原生的 api, 而且用户体验不如原生 app 好

移动端web开发现状

移动端浏览器大多基于webkit内核, 对H5+CSS3支持良好
手机的屏幕尺寸非常多,不同的移动设备有不同的屏幕尺寸、视口大小

设备的屏幕尺寸查询:  https://uiiiuiii.com/screen/

我们开发的网页,在不同的手机上,若想展示效果一致,必然不是为每一种型号手机都开发一套页面,而是要尽可能的能适配所有

视口

视口简单来说就是浏览器显示页面内容的区域。
在PC端,正常的视口宽度就是整个浏览器的窗口可视区的宽度,会随着浏览器窗口大小的重置而缩放;
大多数为PC端设计的网站宽度至少为800px,为了不破坏没有针对移动设备优化的PC网页,移动端引入了视觉视口、布局视口、理想视口三个概念

视觉视口

【视觉视口是指用户当前看到区域】即设备宽度

布局视口

移动设备的浏览器都默认设置 了一个viewport元标签,定义了一个虚拟的布局视口,,CSS 布局将会根据它来进行计算,并被它约束。
一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统
的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px
所以PC上的网页基本能在手机上呈现,只不过看上去很小,一般默认允许用户通过手动缩放、平移来查看网页。 

不同设备大小也不相同由设备出厂设置决定,下图列出了一些设备上浏览器的默认viewport的宽度。

 

布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height
如果要显式设置布局视口,可以使用 HTML 中的 meta 标签进行设置

理想视口

布局视口对用户不友好,【基于理想视口设计的网站,不需要用户手动缩放,也不需要出现横向滚动条,网站的所有内容都可以正常的呈现给用户】
理想视口 viewport设置:

<meta name="viewport"
          content="width=device-width,initial-scale=1.0,user-scalable=no">

上面代码将视口的宽度设置为屏幕宽度(设备逻辑像素),默认无缩放,并且也不允许用户缩放。

属性说明:

移动端【适配】方案 

由于手机屏幕尺寸、分辨率不同,还要要考虑横竖屏问题,为了使得web页面在不同移动设备上【实现尽可能统一或合理的展示效果】,需要在开发过程中使用合理的适配方
案。
常见的适配方案如下:

rem适配
rem单位介绍

Rem( font size of the root element) 是一个相对单位,相对于根元素的字号大小进行计算
大多数浏览器的默认字号是16px,因此默认1rem=16px。

rem布局原理

在布局过程中只要使用 rem 设置元素的尺寸,在改变 rem 的基准值 html 的字体大小的时候,页面上的元素将等比例缩放实现适配。
例:

.box{
      width:1rem;
      height:1rem;
}
@media screen and (min-width:320px){
      html{
            font-size:50px;
      }
}
@media screen and (min-width:480px){
      html{
            }
}

由于设备尺寸繁多需要设置密集的断点因此通过js动态计算并设置html的fontsize值是最常用的方式

rem适配实现

1)设置页面的viewport
2)以设计稿为基准值,1rem=100px,使用rem单位取代px常规布局。
3)换算不同设备尺寸下1rem的值,即改变不同尺寸下html 的font-size

<script>
      //获取html宽度(设备宽度)
      var deviceWidth = document.documentElement.clientWidth;
      // 750可以根据实际设计稿的宽度进行修改
      if(deviceWidth>750){ //假设设计稿为750
      deviceWidth = 750;
      }
      var fs = (deviceWidth*100)/750;
      document.documentElement.style.fontSize = fs + 'px';
</script>

以上代码假设基准值为设计稿,设计稿宽度为750px,如果页面宽度低于750px,那么页面中html的font-size也会按照(当前页面宽度/750)的比例变化。这样,页面中所有应用了
rem的作尺寸单位的元素都会随着页面变化而等比例缩放,从而达到适配。

关键步骤

设置viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

引入计算比例js,计算不同屏幕尺寸下1rem的大小
      换算比例时的基准值以设计稿为准 device-width/基准值

<script src="remscale.js"></script>

从设计稿量取px值转换成rem单位进行布局

100px* 100px
||
1rem 1rem

注:

//最外层的盒子居中处理
.wrap{
      max-width:6.4rem; //以设计稿为准
      margin:0 auto;
      height:500px;
      background-color: yellowgreen;
}

 vw适配

vw单位介绍

vw 即Viewport's width的简写,是css3规范中的视口单位,

相对单位
相对于视口大小

视口宽度 = 100vw ----> 1vw = 视口宽度1%

相对于视口的宽度,视口被均分为100单位的vw。

750px = 100vw
7.5px = 1vw

相关阅读:
除此之外还有vh单位 即Viewport's height,相对于视口的高度,视口高度被均分为100单位的vh。
vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

使用vw单位实现适配 

1vw 等于视窗宽度的1%,在页面布局中将px值换算成vw,
当视口宽度发生变化,则元素大小随即发生变化,实现页面适配

提示:可以借助插件自动计算
缺点:转换后的长度单位不够直观修改维护困难

步骤

设置一下基准值 
从设计稿量取px值直接布局
使用插件直接将px转换成vw

使用rem+vw单位实现适配

沿用rem布局方案,所有的布局元素及属性都用rem做单位,用vw单位设置html的font-size,这样就不再需要JS来动态计算根元素字体大小。

换算过程:
假设在750px的设计稿下,可以理解为100vw,对应750px
沿用rem布局方案中的html{font-size:100px}换算为vw那么 1vw = 7.5px
100px就是13.333333vw了

然后我们就可以在布局写rem单位了, 由于倍率是100,除以100,直接小数点向左移动2位,1rem是100px,那么10px就是0.1rem,不需要借助插件转换计算也可以直观的进行布局
了。

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值