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

 

①设置各种变量

 

采用scss或者less来写css代码有很多好处。这里就不详细说。

 

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

 

个人感觉scss比less更好用一点，用scss定义的话，其中有一个方法是%定义法，就是定义了并不会被编译，而是实际上用到的时候才会被编译。例子图：

 

 

 

②按模块细分

 

个人感觉，按模块等细分之后，代码的可读性能够明显地提高，方便维护，而且引入页面的文件个数也减少了，还可以提高性能呢。不过，这里要注意，子模块的文件名要以“_”开始哦，这样就不会被编译，而是需要引用的时候再编译哦。例子如图：

 

 

 

二、页面适应性布局

 

个人认为，适配移动端比较好的布局方式是百分比+rem布局。

 

百分比的优势在于，同一个百分比的真实尺寸会跟随屏幕大小变化。举个例子，像这种：

 

 

 

 

 

红色框那里，假设现在的要求是一行4个板块，适应任何屏幕。那么，用ul,li写html，然后布局的话，如果写定ul的宽度是100%，然后li的宽度是25%，再设置box-sizing:border-box的话。各种屏幕下，这四块都是平分并且不会出现横向滚动条的。就是像这样比例明显，板块区分度高的情况适合用百分比来布局。

 

代码如下：

 

复制代码

ul{

    width:100%;

    margin-bottom:10px;

｝

ul li{

    width:25%;

    box-sizing:border-box;

｝

复制代码

为什么要设置box-sizing:border-box;呢？不明白的话，可以看这里：http://www.w3school.com.cn/cssref/pr_box-sizing.asp。

 

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

 

一些常用的适应尺寸如下:

 

复制代码

@charset "utf-8";

 

@media only screen and (max-width: 315px){

  html {

    font-size: 50% !important;

  }

}

@media only screen and (min-width: 316px){

  html {

    font-size: 62.5% !important;

  }

}

@media only screen and (min-width: 640px){

  html {

    font-size: 125% !important;

  }

}

@media only screen and (min-width: 750px){

  html {

    font-size: 150% !important;

  }

}

@media only screen and (min-width: 1242px){

  html {

    font-size: 187.5% !important;

  }

}

复制代码

想了解更多，可以参考这里：http://www.cnblogs.com/beidan/p/5275379.html#3382529。

 

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

 

①页面板块可横向滑动

 

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

 

 

 

不要以为这种效果会涉及到什么touch事件，要写多复杂的js。其实只用css就可以很简单地实现了。原理就是利用overflow属性。设置其水平方向滚动，垂直方向hidden即可。

 

当然，还要配合一些其他的代码。

 

具体css代码如下：

 

复制代码

ul.pinxiang-list{

        padding:10px;

        padding-top:0;

        padding-bottom:20px;

        width:100%;

        box-sizing:border-box;

        overflow-x:scroll;

        overflow-y:hidden;

        white-space: nowrap;

        float:left;

｝

ul.pinxiang-list li{

        position:relative;

        display:inline-block;

        margin-right:5px;

 ｝

复制代码

这里最主要的就是要设置ul的宽度是100%，并且向左浮动。li要设置为display:inline-block.

 

还有一个就是，如果你用谷歌调试的时候，会发现，效果是这样的：

 

 

对，就是会出现一个明显的滚动条。但是如果你用真机，也就是用移动设备看的时候，你会发现其实滚动条是不会出现的。所以有时候做移动的东西，还是需要真机测试一下比较靠谱啊。

本文是成都网站建设公司、成都网站设计制作公司、成都APP开发公司、成都响应式网站建设、成都VR全景制作-桔子科技公司为您整理！
成都网站建设,成都网站设计,成都网站制作,成都网页设计，成都网站建设公司 ,成都网站设计公司,成都网站制作公司，成都网页设计公司，网站建设、网站制作、网站设计、网页设计、成都响应式网站建设、成都响应式网站制作、成都响应式网站开发、成都全景制作、成都VR全景制作、成都手机网站建设，手机网站建设，成都APP开发，APP开发，成都建网站，成都做网站，成都商城网站建设，集团网站建设,网站建设,高端网站建设,品牌网站建设,成都平台网站建设，成都响应式网站建设，成都微信网站建设，成都微商城网站建设，成都微信营销，成都网站优化，成都网络公司。