推广｜移动web开发视频

Posted 2021-04-30 学习交流

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

默认行为

作为之前开发pc端的人员，第一反应就是如何把那么大的pc界面内容展现到手机小小的屏幕上。其实我们可以先做一个实验，用手机访问一个pc的界面，我们会发现手机的将整个界面的缩小到整个手机界面，需要放大才能看清所有的内容。
viewport设置

高效移动web布局

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

一：Flexbox弹性盒子布局

这个布局方式就是顾名思义，是对一个盒子的弹性设置，你可以在里面设置内容的占用空间情况比例设置，排放位置等等。

二：响应式设计

响应式布局是靠（媒体查询）来实现的，所谓媒体查询就是样式判断当前的运行环境（屏幕宽高，设备宽高，横屏竖屏）来配置不同的样式来显示。
特别样式处理

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

高清图片

为了避免图片产生模糊，图片的宽高应该用物理像素渲染，即是100＊100的图片应该使用100dp*100dp。
一像素边框

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

相对单位 rem

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

多行文本益处。。。

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