合肥Web培训
达内合肥web培训中心

0551-64632511

热门课程

移动端web开发的一些技巧

  • 时间:2016-06-16
  • 发布:合肥web培训
  • 来源:达内新闻

做移动端web开发,要注意页面要适用不同的手机屏幕,ipad ,合肥web前端培训专家介绍一些小技巧,帮你更好地完成移动端开发。

一、样式按组件或板块分文件写再合成

①设置各种变量

采用scss或者less来写css代码有很多好处。

我们拿到设计图的第一步,就是要分析各个页面之间有哪些模块、哪些样式、哪些颜色是一样的。一般情况下,为了各个页面的风格统一,各个页面上的主颜色应该都是一致的,而且好些页面都会用到一些相同的组件,例如slider。所以,我们首先可以定义一个常量文件,里面就专门存放颜色、高度、宽度等变量。定义一个公共样式文件,例如写一些各个页面都有可能用到的清楚浮动等样式。

用scss定义的话,有一个方法是%定义法,就是定义了并不会被编译,而是实际上用到的时候才会被编译。

②按模块细分

按模块等细分之后,代码的可读性能够明显地提高,方便维护,而且引入页面的文件个数也减少了,还可以提高性能。达内web培训专家提示,子模块的文件名要以“_”开始,这样就不会被编译,而是需要引用的时候再编译 。

二、页面适应性布局

达内web培训专家认为,适配移动端比较好的布局方式是百分比+rem布局。

百分比的优势在于,同一个百分比的真实尺寸会跟随屏幕大小变化。要注意,这个时候的间距就不要用margin-left和margin-right来撑开,而是用padding来撑开。

rem的话,rem的取值是只。相对于根元素htm的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可。你再用@media写一下不同尺寸下跟元素html的font-size的值即可。当你改变尺寸时,字体。图片等,就会自动跟着适应了。

三、常见的一些效果的做法

①页面板块可横向滑动

一种就是我们经常见的,一些特卖活动、抢购活动的时候,需要出现横向滚动情况。

只用css就可以很简单地实现了。原理就是利用overflow属性。设置其水平方向滚动,垂直方向hidden即可。

达内web培训专家提示,最好设置ul的宽度是100%,并且向左浮动。li要设置为display:inline-block

想成为web前端工程师,就选合肥达内web培训机构,TTS 云教学模式,web培训名师指导,4个月让你成为web开发高手。
上一篇:解读和认识Repaint 、Reflow
下一篇:javaScript在html中有哪些应用?

JavaScript是真正的 OOP 语言吗?

合肥达内Web培训机构:浅谈2017年web网页新趋势

合肥达内Web培训机构聊一聊web前端开发的行业前景

合肥达内Web前端培训培养软件开发工程师

选择城市和中心
贵州省

广西省

海南省