分享一下响应式开发的一些基础样式

时间:2017-03-29 14:10 来源:李坤www.inspinovation.com

因思维新建站官网:www.inspinovation.cn

在做响应式开发的时候,往往会用到一些基础的不变的内容,今天我在此分享一下平时自己总结的一些常用模块。

1. 单页模板

在新建页面的时候,一般编辑器会提供一个基础样式,但是不全面,下面是小编平时使用的一个模板代码。需要的可以直接复制然后粘贴,开始你的创作~



  
    
    
    
    
    
    
    
    模板标题  
   
 

 
 

2.颜色选择

不同的平台(Mac、PC等)有不同的调色板,不同的浏览器也有自己的调色板。这就意味着对于一幅图,显示在Mac上的Web浏览器中的图像,与它在PC上相同浏览器中显示的效果可能差别很大。为了确保所有显示器显示的色彩都一致,请设计师尽量选择 安全色 (点击查看),来作为设计色。

这里推荐一个查看安全色的网址: http://www.bootcss.com/p/websafecolors (点击打开)

3. @Media选择器尺寸标准

在开发响应式布局的时候,我们会利用媒体选择器来定义不同尺寸下的CSS样式,下面是总结出来比较全的一套尺寸标准。

屏幕名称尺寸标识最小尺寸最大尺寸
手机屏幕xs480px479px
平板尺寸sm767px768px
中型屏幕md992px991px
大型屏幕lg1200px1199px

选择器代码样式:

/*手机屏幕*/
@media screen and (min-wdith:480px){

}
@media screen and (max-wdith:479px){

}

/*平板屏幕*/
@media screen and (min-wdith:767px){

}
@media screen and (max-wdith:768px){

}   

/*中型屏幕*/
@media screen and (min-wdith:992px){

}
@media screen and (max-wdith:991px){

}

/*大型屏幕*/
@media screen and (min-wdith:1200px){

}
@media screen and (max-wdith:1199px){

}

4.独立区块

在我们设计响应式网页的时候,需要每个模块独立摆放,避免粘合的太紧而在不同尺寸下无法分离,然而每个模块里面因为某些需求我们会加很多奇奇怪怪的特效,比如脱离文档流 float:left、局对定位什么的。如果没有一个完美的容器去包裹他们,难免会出现互相干扰的情况,这样调试起来就非常麻烦了。

我在这里用的类名为:.section-item 

CSS样式为:

.section-item{
     display:block;
     width:100%;
  
}
.section-item:before,.section-item:after{
     display:table;
     content:" ";
     clear:both;
}

这样能保证包裹在里面的内容不会因为脱离文档流而互相影响。因为在每个DIV层的前面和后面都清除了左右浮动。

希望对大家有帮助。。


因思维新专注于高端网站订制开发,不仅仅为您建设网站,还为您做网络营销。

(责任编辑:李坤)

项目咨询

PROJECT CONSULTING