借鉴bootstrap的方法,快速实现响应式开发
响应式开发
注意:
任何框架都是一个辅助手段,只需借鉴其中的核心思想,把其中核心的东西提炼出来即可。不要因为,提到响应式就想到只能够用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`,我们一个模块的样式设计就是一个最外层一个盒子,只有一个节点。类似于下面的形式:
```less
.feature-container{
>.a{
// .a样式描述
>.b{
// .b 样式描述
// .c .d. ...
}
}
}
```
这样的书写形式具有dom的树状结构,和方便开发与排错以及后期的维护。(然而,项目上是没有很好的约束,我感觉是一个败笔)一个盒子的所有样式规则是嵌入的形式。我们最期待的形式就是在某个位置上能够全部搞定这个部分的样式,不要到处乱写,很没有把空性。但是,因为@media这个玩意,在css之中,前面的是不可以有层级关系,不能有那种父子选择器、后代选择器的那种东西。这就很尴尬了,这与我们之前的代码优雅的观念很矛盾。
我们知道,我们写css常常会有一些技巧,比如将子代的通用可继承的样式会在dom树上提升,直接给这类子元素的祖先设置即可。同类设置,是一个技巧。
市面上,有很多公司pc和移动端都没有通过响应式来实现的。其中很重要的一项就是因为,样式的文件的不方便管理。那么,我现在提出的解决方案就是以`@media`来区分终端大小,实现不同尺寸的设备,达到需求。
`重点:`@media之后的各个尺寸的设置,需要和一般样式的设置一样,和dom树结构一样,保持一致,这样才算优雅。
具体如下:
```less
.feature-container{
// 不同尺寸设备的通用样式设定
}
@media (min-width:500px){
// >500px尺寸的设备的独有样式
}
@media (max-width:500px){
// 是不是很优雅,设计得蛮巧妙?未经允许,不让转。
借鉴bootstrap的方法,快速实现响应式开发的更多相关文章
- Ink – 帮助你快速创建响应式邮件(Email)的框架
Ink 可以帮助你快速创建响应的 HTML 电子邮件,可工作在任何设备和客户端.这个 CSS 框架帮助您构建可在任何设备上阅读的 HTML 电子邮件.曾经需要你兼顾各种邮件客户端的日子一去不复返了,I ...
- 使用 Responsive Elements 快速构建响应式网站
Responsive Elements 可以使任何元素来适应和应对他们所占据的区域.这是一个轻量的 JavaScript 库,你可以轻松嵌入到你的项目.元素会更具自己的宽度,自动响应和适应空间的增加或 ...
- 第二百三十六节,Bootstrap辅组类和响应式工具
Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒 ...
- Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
- BootStrap常用组件及响应式开发
BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...
- 响应式开发(五)-----Bootstrap CSS----------Bootstrap 网格系统
如果我们看过一些bootstrap的框架,经常看到col-sm-3等样式class. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系 ...
- 移动端开发之响应式开发和bootstrap基础
响应式开发 (就是利用媒体查询针对不同宽度的设备进行布局和样式的设置,从而设配不同设备的目的) 响应式布局容器响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果 原理:不同屏幕下,通过媒体查 ...
- springboot 使用webflux响应式开发教程(二)
本篇是对springboot 使用webflux响应式开发教程(一)的进一步学习. 分三个部分: 数据库操作webservicewebsocket 创建项目,artifactId = trading- ...
- 带你玩转JavaWeb开发之五-如何完成响应式开发页面
响应式页面开发 使用BootStrap开发一个响应式的页面出来 响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验 需求分析 开发一套页面,让用户能够在PC端, Pad ...
随机推荐
- Java 8 新特性-菜鸟教程 (5) -Java 8 Stream
Java 8 Stream Java 8 API添加了一个新的抽象称为流Stream,可以让你以一种声明的方式处理数据. Stream 使用一种类似用 SQL 语句从数据库查询数据的直观方式来提供一种 ...
- Golang包管理工具之govendor的使用
1. govendor简介 golang工程的依赖包经常使用go get命令来获取,例如:go get github.com/kardianos/govendor ,会将依赖包下载到GOPATH的路径 ...
- Extjs 在项目中碰到问题
1.切换tabpanel,新建tab关闭后再新建报错,在火狐下报错 TypeError: el is null el.addCls.apply(el, arguments); 这个我在下一篇文章中 ...
- Sublime Text3 远程 Linux
ctrl+shift+p快捷键 ,打开命令面板 搜索命令 Install Packages,选中,Enter 稍等几秒,重新出现了面板,搜索sftp插件,选中 Enter 显示安装成功,提示你如何使用 ...
- ModBus通信协议的【Modbus RTU 协议使用汇总】
1.RTU模式 当控制器设为在Modbus网络上以RTU(远程终端单元)模式通信,在消息中的每个8Bit字节包含两个4Bit的十六进制字符.这种方式的主要优点是:在同样的波特率下,可比ASCII方式传 ...
- 还需要注册的是我们还有一个是“交差集” cross join, 这种Join没有办法用文式图表示,因为其就是把表A和表B的数据进行一个N*M的组合,即笛卡尔积。表达式如下:
还需要注册的是我们还有一个是"交差集" cross join, 这种Join没有办法用文式图表示,因为其就是把表A和表B的数据进行一个N*M的组合,即笛卡尔积.表 ...
- java Spring 各版本jar包下载地址
http://repo.spring.io/simple/libs-release-local/org/springframework/
- 【Spring】23、ApplicationContext ,ApplicationContextAware,Listener,Event 的关系解读
tomcat容器启动流程 启动tomcat容器,加载web.xml,建立整个容器(Servlet容器,这里是tomcat吧)的上下文,ServletContext,这时web.xml有个监听器,就是C ...
- Java 支付宝支付,退款,单笔转账到支付宝账户(支付宝支付)
最近一直在接触第三方,刚接入完支付宝的API做一下总结,个人能力薄弱有不对的地方望指教. 做的是一个小型电商项目,所以会接入第三方的支付和登入功能, 第一次接入第三方撸了很多官方文档. 进入主题, ...
- java动态代理--一个简单的例子
这几天看视频看到了java的动态代理,这里写一个小例子.在写例子的时候发现:认为自己会了,和能写出来真不是一个概念.还是要多写代码,然后写博客再深入一些,费曼学习法--教,是最好的学. 1.什么是动态 ...