移动web开发浅谈之那些我们需要知道的基础

stackfing 发布于2019-08-29 11:02 / 3085人阅读

摘要：正文概念本次要谈的移动不是，只是很普通的移动端的界面。默认行为作为之前开发端的人员，第一反应就是如何把那么大的界面内容展现到手机小小的屏幕上。就是在显示多行文字的时候，可能需要在自己期望显示多少行之后，省略后面的文字，然后以。。。

前言

开发生涯总是丰富多采，工作多年，不同领域还是逃不过雨露均沾，之前开发过android，微信，ios，web网站也玩过。但是对于移动web这一块，确实没有专门很深入的学习，现在需要做了，也将自己的学习过程记录下来，供大家互相学习，说的不对，可以报警。

正文概念

本次要谈的移动web不是web app，只是很普通的移动端的web界面。
移动web可以这么理解：就是把以前在pc上的界面搬到移动端（为了说明方便，我下面统称之为手机）来操作，展示，这样解释没毛病。

默认行为

作为之前开发pc端的人员，第一反应就是如何把那么大的pc界面内容展现到手机小小的屏幕上。其实我们可以先做一个实验，用手机访问一个pc的界面，我们会发现手机的将整个界面的缩小到整个手机界面，需要放大才能看清所有的内容。
这里面有个viewport的概念，其实手机浏览器帮我们做了一个事情，他会提供一个viewport,以ios 8为例，它提供了一个960px宽的viewport来放置我们的pc界面，这样的目的是为了保持pc的界面的不错乱，然后将这viewport（布局viewport）整体缩放到手机屏幕（设备宽度）的大小（度量的viewport）可视范围。

viewport设置

所以这样的方式是不合适我们开发的，所以我们需要设置一下meta

以上设置是
［布局的viewport］＝［设备宽度］＝［度量的viewport］
这样我们设计出来的界面才会比较直观的显示在手机上，而不需要考虑缩放问题

高效移动web布局

我只是简单的介绍两种布局的大概，以及优缺点，具体的还需要各位百度了解详情了，毕竟一两句话说不清楚

一：Flexbox弹性盒子布局

这个布局方式就是顾名思义，是对一个盒子的弹性设置，你可以在里面设置内容的占用空间情况比例设置，排放位置等等。
优点：比较的方便，排列出你想要的适配效果。
缺点：存在兼容性问题，特别是android4.4以下只兼容老版本的Flexbox.(老版本叫Flexbox，新版本就叫Flex)，所以还是推荐使用老版本的Flexbox。

二：响应式设计

响应式布局是靠（媒体查询）来实现的，所谓媒体查询就是样式判断当前的运行环境（屏幕宽高，设备宽高，横屏竖屏）来配置不同的样式来显示。
它有三个设计点
1.百分比布局
什么意思呢，就是不同的屏幕，宽度不可控，所以在布局的时候尽量采用百分比的方式放置元素来兼容不同的屏幕
2.弹性图片
这个解释就是当屏幕大于一定的宽度的时候，你可以展示一个固定大小的图片，当你检测出屏幕很小的时候，就要让这个图片适当的按百分比缩放，才有更好的体验布局效果，跟第一种百分比布局不太一样，细细体会
3.重新布局，显示与隐藏
这个就是大招了，就是检测不一样的界面宽高参数，直接大动作调整不同的排版结构，和一些小屏幕上面不太重要模块的隐藏操作。
这三个设计点事响应式布局非常常用的方式，让我们了解一下他的利弊吧
优点：可以说是一本万利，一个界面适应了所有的设备，减少了重复开发。
缺点：因为他加载了所有设备端的样式，管你用不用，毕竟当你在手机端条件比较差的时候，加载多余的样式，流量，性能等方面不是最优的。

特别样式处理

我这里简单的说明一些情况，大家可以有个印象即可，解决方式很多

高清图片

为了避免图片产生模糊，图片的宽高应该用物理像素渲染，即是100＊100的图片应该使用100dp*100dp。
width:(w_value/dpr)px;
height:(h_value/dpr)px;
(原因理解px和dp在手机上面的显示关系)

一像素边框

一像素的边框显示模糊，不精致的问题，网上有众多解决方式，可以百度一下即可

相对单位 rem

em:是根据父节点的font-size为相对单位
rem：是根据html的font-size为相对单位
em在多层嵌套下，变得非常难以控制
rem更加能作为全局统一设置的度量

rem的基值设置多少比较好？
为了适应大手机屏幕推荐：rem = screen.width/20 (手动计算设置)
还有一点需要注意的是字体font-size不推荐使用rem单位，因为字体的阅读舒服感大小就是那么大，不需要根据屏幕的大小而变化。

多行文本益处。。。

就是在显示多行文字的时候，可能需要在自己期望显示多少行之后，省略后面的文字，然后以。。。的方式显示，具体操作方法网上都有

总结

这是我自己的学习过程，希望大家一起成为一个优秀的工程师，bye！?

GPU云服务器云服务器移动web开发 web移动端开发 web前端开发需要会什么 web后端开发需要学习什么

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111382.html

3月份前端资源分享

摘要：面试如何防骗一份优秀的前端开发工程师简历是怎么样的作为，有哪些一般人我都告诉他，但是他都不听的忠告如何面试前端工程师更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfront/mo... 3月份前端资源分享 1. Javascript 使用judge.js做信息判断 javascript...

nanchen2251 2019-08-21 15:21 评论0 收藏0
2018 浅谈前端面试那些事

摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...

LiuRhoRamen 2019-08-30 14:11 评论0 收藏0
2018 浅谈前端面试那些事

摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...

stormgens 2019-08-22 15:34 评论0 收藏0
2018 浅谈前端面试那些事

摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...

Hujiawei 2019-08-01 18:43 评论0 收藏0
7月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfr...

pingan8787 2019-08-20 17:53 评论0 收藏0