在chrome下可以自定义滚动条样式,举个例子
::-webkit-scrollbar{
width: 6px
height: 6px
}
::-webkit-scrollbar-track-piece
{
background-color: rgba(204, 204, 204, 0.66)
-webkit-border-radius: 0px
}
::-webkit-scrollbar-thumb
{
border-radius: 6px
-webkit-border-radius: 6px
background-color: #7b7b7b
}
/*定义横向和纵向交点的样式*/
::-webkit-scrollbar-corner { background-color: transparent }
这里可以定义滚动条的粗细度和颜色等,至于更具体的诸如分别定义横竖滚动条样式等需要你自行修改。
另外也可以利用一些开源的滚动条插件来实现你需要的效果,比如我之前使用过的nicescroll.js,在浏览器兼容方面会好一些,但是可能会对系统的稳定性有影响,这个需要你权衡。
试用css3 语法@media screen and (判断属性){ CSS样式选择器 }
1、DIV+CSS小案例描述
根据整体来设置,设置他们的最大宽度(width)为640px,最小宽度为320px,此类设置适用于手机移动端;要实现屏幕自适应,那么就要用百分比来实现;所以设置width整体100%;img宽度100%;这样实现图片的自由缩放;
HTML代码如下:且仔细看清每一行的注释:
2、看下实现的效果如何:文字大小是如何变化的;
变化浏览器后效果:如图
自定义缩放其实主要就是判断浏览器的宽度,高度需要的话可以设置,还有设置内部区域块儿的宽度以及图片展示用百分比来控制;