枣庄当前位置:主页 > 网站推广 > 山东地区 > 枣庄 >

枣庄薛城网站关键词优化推广报价 网站移动端如何布局

  发表时间:2021-04-24 21:31  点击次数:


  手机上网经常会用到WAP这一概念,一些专门为手机浏览的网站往往称为wap网站,wap是不是就是手机网站的意思,手机上网就是浏览wap网站吗?

枣庄薛城网站关键词优化推广报价 网站移动端如何布局

  WAP是英文Wireless Application Protocol的缩写,意思是无线应用协议。WAP是一种GPRS应用模式,但并不是手机上网的唯一模式,其实WAP本身和手机网站并不是一回事,手机上网也不仅仅是浏览wap网站。

  网站移动端如何布局?

  1.固定布局

  方法

  里把 加好,然后根据设计稿设定相应的宽度即可,其他地方类似于pc端。

  优点

  思路沿用pc端,上手比较快

  缺点

  大屏手机显示网页比较宽,而固定布局宽度参照永远是固定的宽度(设计稿的大小),导致左右两边会有空白。手机横屏的时候两边空白更亮。

  2.流动布局

  方法

  适用百分比做单位。

  优点

  能更很好的适应各个屏幕分辨率的手机。

  缺点

  不够灵活,添加元素时,需要更改其他元素的值。

  3.浮动布局

  方法

  float+clearfix(清除浮动)

  优点

  这是传统的浮动方式,写法简单,实现效果起来干脆利落

  缺点

  对浮动元素要求比较严格,布局也不太灵活

  4.定位布局

  方法

  在布局当中很常用,利用position+四个方位的具体值(top/left/right/bottom)相互配合,实现起来也比较容易

  优点

  实现简单,在移动端中,定位很常用,尤其是弹窗,

  缺点

  移动端中频繁的使用定位,会出现一些莫名的bug;

  fixed+input在ios上存在bug,会出现使用fixed布局的元素乱掉。在android手机上当input框获取焦点时,换气键盘,会出现定位的元素被抬升至手机键盘的上方。

  5.混合布局

  方法

  所谓混合布局,就是把所有学到的知识灵活运用在布局中。例如:rem+百分比(流动布局) flex+rem等

  优点

  布局灵活,集合其他布局的优势达到自己的布局要求

  缺点

  代码有点累赘;代码不统一,维护困难

  6.flex布局

  方法

  也叫弹性布局。

  这个是最简单的flex布局了,其实弹性布局里面还有很多简单高效实用的属性,很方便移动端的布局。

  优点

  自适应很好,灵活性很强,目前在移动端应用的还是比较广泛。

  缺点

  需要写很多兼容代码。

  7.rem布局

  方法

  rem是通过根元素进行适配的,网页中的根元素指的是html我们通过设置html的font-size大小就可以控制rem的大小。有以下两种适配方式:

  1.rem+@media(通过媒体查询设置html的font-size值,达到自适应)

  8.响应式布局

  方法

  使用@media(媒体查询)设置页面在不同的屏幕宽度下达到自适应以及响应式(根据不同屏幕大小,页面布局,样式会做出相应的调整)典型案例(bootStrap官网)

  优点

  不仅在不同的屏幕下达到自适应,还会在相应的屏幕下对页面布局,样式做出相应的调整,达到更加的用户体验

  缺点

  兼容各种设备工作量大,效率低下;代码累赘,会出现隐藏无用的元素,加载时间过长;一定程度上改变了网站原有的布局结构,会出现用户混淆的情况;增加UI和开发的工作量。

  制作移动端网站不可忽视的问题:

  一、网站的图片问题

  对于网站页面来说图片是不可或缺的一部分,特别是移动端网站,移动端网站页面中图片一定要这几点:

  1、图片的数量:纵使图片能给页面带来很好的视觉效果,但是也是不能够多加的,特别是移动端,网站页面图片过多就会导致加载太慢,并且手机屏幕大小本就有限,所以页面中图片的数量一定要注意合适就好。

  2、图片的清晰度:这个济南网站建设的小编不止一次提过,一个网页设计,如果图片看都看不清楚的话,网民怎么会买你的账,继续浏览下去呢?特别是移动端网站,手机的配置和屏幕的大小更对图片的要求严格了很多,所以图片的清晰度在网页设计时是一定要注意的。

  二、网站的布局

  移动端网站不必PC端网站,所以对于网站页面的布局就要格外的去重视一下了,一个页面总共就手机那么大,所以网站的布局一定要突出网站的方便性以及主题,千万不要把仅有的空间浪费在废话上面。

  三、页面中的文字

  有的人就喜欢用一些自定义文字,去提高网站的特别与不同,但是小编想告诉大家的是文字是特别了,是比较够吸人眼球了。但是当用户访问网站是还有去下载字体,这样网站的页面打开的速度也就会大打折扣了,所以小编劝大家还是别玩花的了。