课程咨询 :0551-64632511 QQ:2146233496

保险公司承保达内学员学习效果

  • 移动端web开发的一些技巧

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

  • 做移动端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中有哪些应用?

最新开班日期  |  更多

WEB零基础全日制班

WEB零基础全日制班

开班日期:07-31

WEB零基础周末班

WEB零基础周末班

开班日期:07-31

WEB前端业余班

WEB前端业余班

开班日期:07-31

WEB前端就业班

WEB前端就业班

开班日期:07-31

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632511 QQ:2146233496     全国服务监督电话:400-111-8989
  • 服务邮箱 tousu@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56