Web手机网站前端开发技巧

手机网站前端开发技巧|前端开发者

[color=#ff0000]1.布局使用百分比:[/color]
不同的手机有着不同的分辨率,这时再用我们pc端布局常用的px就不合适了。使用百分比布局要时时刻刻清楚其父元素,因为子元素的百分比高度是根据父元素的高度来确定的,当父元素的高度为不确定值时,或者说父元素的高度未定义时,子元素的高度百分比将没有用(没有参照物)。所以只有设置了父元素的高度,子元素的高度百分比才会有用。

[color=#ff0000]2.em与rem:[/color]
em是根据相对单位,不是固定的,他会继承父级元素的字体大小,若没有父级则em的相对基准点为浏览器的字体大小,浏览器的字体默认为16px,因此若无父级元素,相对于浏览器大小:Xem=X*16px;
rem是css3新增属性,是完全相对于html根元素大小设定的,默认为10px,因此无论父级字体大小,1rem=10px。

[color=#ff0000]3.meta标签的使用:[/color]
<meta name=”viewport” content=”width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览

[color=#ff0000]4.适当引用框架:[/color]
在移动端很常用的就是点击按钮滑出侧边栏,还有一些常用的小图标,推荐一个这次开发中用到的框架:MUI 针对于移动端开发很有效。

[color=#ff0000]5.设置圆角:[/color]
放一个图片或者一个按钮,设置圆角会比较美观,设置圆角的值可以用百分比,也可以用em等单位。
html 代码

[color=#ff0000]6.边距塌陷:[/color]
与在pc端开发一样,开发过程中需要的一个很需要注意的问题的边距塌陷,典型的问题是margin-top的嵌套,对子元素设置margin-top值,子元素相对于父元素的位置没有变,而父元素跟着子元素一起向下移动响应的距离。其原理可参考本人之前的笔记css之BFC学习笔记,解决方案:
1.给父元素div1设置一个padding值
html 代码

2.给父元素div1设置一个overflow:hidden;在不加overflow:Hidden;的时候,margin-top:这个属性是认不到边的,也就是失效。但是ie浏览器解决了这个问题,火狐、谷歌之类的就会出现失效,所以这是个标准问题,也是个兼容问题。
html 代码

3.把外边距margin改为padding,由于这样做撑大了盒子的高度,会出现如图效果,所以不建议使用。

[color=#ff0000]7.白色背景颜色搭配:[/color]

[color=#ff0000]8.自制半透明背景:[/color]
在很多情况下需要自己写一个半透明的背景,不能直接用opacity,这样会使背景与背景中的文字一起变透明。想要让文字不透明,需要用到background-color: rgba(0,0,0,0.5);最后一个值为透明度,一个颜色的rgba值可以从photoshop中查找。关于兼容:
html 代码

手机网站前端开发技巧|网站前端开发

https://www.rokub.com

» 本文来自:前端开发者 » 《Web手机网站前端开发技巧》
» 本文链接地址:https://www.rokub.com/3015.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!