响应式开发
注意:
任何框架都是一个辅助手段,只需借鉴其中的核心思想,把其中核心的东西提炼出来即可。不要因为,提到响应式就想到只能够用bootstrap来实现,框架现有的东西是可以提高我们的效率,但是其内部场景的冗余就很注定只是一种懒人方法,要想攀登高峰,只有一步一步脚印来。然后,不断提炼,实力和技术才能够不断进步。
目前项目是响应式开发,虽然会感觉各种节点的冗余,但是谁让咱是个打工仔呢?
周知响应式的开发的基础是媒体查询,就是这玩意
@media
,正对不同的屏幕尺寸进行的适配就是响应式了。
为在项目上有较好的编码体现,直接套用bootstrap的代码。通过使用这些工具class可以根据屏幕和不同的媒体查询显示或隐藏页面内容,加速针对移动设备的开发。
尝试使用这些class并避免创建同一个网站的不同版本,从而能够完善不同设备上的显示效果。响应式工具目前只是针对块级元素, 不支持inline元素和表格元素。
类名控制如下:
通过单独或联合使用以下列出的class,可以针对不同屏幕尺寸隐藏或显示页面内容。
超小屏幕手机 (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面 (≥992px) | 大屏幕桌面 (≥1200px) | |
---|---|---|---|---|
.visible-xs | 可见 | 隐藏 | 隐藏 | 隐藏 |
.visible-sm | 隐藏 | 可见 | 隐藏 | 隐藏 |
.visible-md | 隐藏 | 隐藏 | 可见 | 隐藏 |
.visible-lg | 隐藏 | 隐藏 | 隐藏 | 可见 |
.hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
.hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
.hidden-md | 可见 | 可见 | 隐藏 | 可见 |
.hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
样式的抽离
@media值的大小,可以根据公司的适配要求,自己改写
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
display: none !important;
}
@media (max-width: 767px) {
.visible-xs {
display: block !important;
}
table.visible-xs {
display: table !important;
}
tr.visible-xs {
display: table-row !important;
}
th.visible-xs,
td.visible-xs {
display: table-cell !important;
}
}
@media (max-width: 767px) {
.visible-xs-block {
display: block !important;
}
}
@media (max-width: 767px) {
.visible-xs-inline {
display: inline !important;
}
}
@media (max-width: 767px) {
.visible-xs-inline-block {
display: inline-block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table !important;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-block {
display: block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline {
display: inline !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.visible-sm-inline-block {
display: inline-block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md {
display: block !important;
}
table.visible-md {
display: table !important;
}
tr.visible-md {
display: table-row !important;
}
th.visible-md,
td.visible-md {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-block {
display: block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline {
display: inline !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.visible-md-inline-block {
display: inline-block !important;
}
}
@media (min-width: 1200px) {
.visible-lg {
display: block !important;
}
table.visible-lg {
display: table !important;
}
tr.visible-lg {
display: table-row !important;
}
th.visible-lg,
td.visible-lg {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.visible-lg-block {
display: block !important;
}
}
@media (min-width: 1200px) {
.visible-lg-inline {
display: inline !important;
}
}
@media (min-width: 1200px) {
.visible-lg-inline-block {
display: inline-block !important;
}
}
@media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none !important;
}
}
@media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}
那么,要控制元素在超小屏幕和小屏幕下的状态,则可以使用
.yourClassName.visible-xs{
/*超小屏幕下的样式...*/
}
.yourClassName.visible-sm{
/*小屏幕下的样式...*/
}
注意 :bootstrap版本是3样式代码
2017.10.3总结
目前项目上用css是使用面向对象的方式实现的,即.scss
/.less
,我们一个模块的样式设计就是一个最外层一个盒子,只有一个节点。类似于下面的形式:
.feature-container{
>.a{
// .a样式描述
>.b{
// .b 样式描述
// .c .d. ...
}
}
}
这样的书写形式具有dom的树状结构,和方便开发与排错以及后期的维护。(然而,项目上是没有很好的约束,我感觉是一个败笔)一个盒子的所有样式规则是嵌入的形式。我们最期待的形式就是在某个位置上能够全部搞定这个部分的样式,不要到处乱写,很没有把空性。但是,因为@media这个玩意,在css之中,前面的是不可以有层级关系,不能有那种父子选择器、后代选择器的那种东西。这就很尴尬了,这与我们之前的代码优雅的观念很矛盾。
我们知道,我们写css常常会有一些技巧,比如将子代的通用可继承的样式会在dom树上提升,直接给这类子元素的祖先设置即可。同类设置,是一个技巧。
市面上,有很多公司pc和移动端都没有通过响应式来实现的。其中很重要的一项就是因为,样式的文件的不方便管理。那么,我现在提出的解决方案就是以
@media
来区分终端大小,实现不同尺寸的设备,达到需求。
重点:
@media之后的各个尺寸的设置,需要和一般样式的设置一样,和dom树结构一样,保持一致,这样才算优雅。
具体如下:
.feature-container{
// 不同尺寸设备的通用样式设定
}
@media (min-width:500px){
// >500px尺寸的设备的独有样式
}
@media (max-width:500px){
// < 500px 尺寸设备的独有样式
}
是不是很优雅,设计得蛮巧妙?未经允许,不让转。