响应式开发

注意:任何框架都是一个辅助手段,只需借鉴其中的核心思想,把其中核心的东西提炼出来即可。不要因为,提到响应式就想到只能够用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的方法,快速实现响应式开发的更多相关文章

  1. Ink – 帮助你快速创建响应式邮件(Email)的框架

    Ink 可以帮助你快速创建响应的 HTML 电子邮件,可工作在任何设备和客户端.这个 CSS 框架帮助您构建可在任何设备上阅读的 HTML 电子邮件.曾经需要你兼顾各种邮件客户端的日子一去不复返了,I ...

  2. 使用 Responsive Elements 快速构建响应式网站

    Responsive Elements 可以使任何元素来适应和应对他们所占据的区域.这是一个轻量的 JavaScript 库,你可以轻松嵌入到你的项目.元素会更具自己的宽度,自动响应和适应空间的增加或 ...

  3. 第二百三十六节,Bootstrap辅组类和响应式工具

    Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒 ...

  4. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  5. BootStrap常用组件及响应式开发

    BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...

  6. 响应式开发(五)-----Bootstrap CSS----------Bootstrap 网格系统

    如果我们看过一些bootstrap的框架,经常看到col-sm-3等样式class. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系 ...

  7. 移动端开发之响应式开发和bootstrap基础

    响应式开发 (就是利用媒体查询针对不同宽度的设备进行布局和样式的设置,从而设配不同设备的目的) 响应式布局容器响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果 原理:不同屏幕下,通过媒体查 ...

  8. springboot 使用webflux响应式开发教程(二)

    本篇是对springboot 使用webflux响应式开发教程(一)的进一步学习. 分三个部分: 数据库操作webservicewebsocket 创建项目,artifactId = trading- ...

  9. 带你玩转JavaWeb开发之五-如何完成响应式开发页面

    响应式页面开发 使用BootStrap开发一个响应式的页面出来 响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验 需求分析 开发一套页面,让用户能够在PC端, Pad ...

随机推荐

  1. JAVA 面试知识点

    参考:https://www.cnblogs.com/java1024/p/8594784.html 反射: JAVA反射机制是在运行状态中, 对于任意一个类,都能够知道这个类的所有属性和方法: 对于 ...

  2. Dubbo 源码分析系列之一环境搭建

    环境搭建的步骤有哪些 依赖外部的环境 使用的开发工具 源码的拉取 结构大致介绍 1 依赖的外部环境 安装JDK 安装Git 安装maven 这边我们就不介绍怎么安装这些外部环境了,大家自行从安装这些外 ...

  3. cmd 导入数据库文件

    mysql -uroot -p show databases use 库名 source D:\kuming.sql

  4. MySQL优化(1)--------常用的优化步骤

    在开始博客之前,还是同样的给一个大概的目录结构,实则即为一般MySQL的优化步骤 1.查看SQL的执行频率---------------使用show status命令 2.定位哪些需要优化的SQL-- ...

  5. [转]多个ajax请求时控制执行顺序或全部执行后的操作

    本文转自:https://blog.csdn.net/fsdad/article/details/71514822 一.当确保执行顺序时: 1. 请求加async: false,,这样所有的ajax就 ...

  6. JS读取服务器返回的XMl格式字符串

    function PostSMS(phoneNumber, sessionID, requestUrl, successAction) { $.ajax( { type: 'POST', url: r ...

  7. VS2017进程为idXXXX 无法启动解决方案

    1.对无法启动项目的 .csproj 后缀文件用记事本打开 找到<WebProjectProperties>xx</WebProjectProperties> 删掉 让后 重新 ...

  8. [PHP] 算法-删除链表中重复的结点的PHP实现

    删除链表中重复的结点: 1.定义两个指针pre和current 2.两个指针同时往后移动,current指针如果与后一个结点值相同,就独自往前走直到没有相等的 3.pre指针next直接指向curre ...

  9. eclipse中安装windowbuilder插件、应用及卸载

    一.安装windowbuilder插件 1.找到对应版本的windowbuilder 连接地址:http://www.eclipse.org/windowbuilder/download.php 如图 ...

  10. Python带你轻松进行网页爬虫

    前不久DotNet开源大本营通过为.NET程序员演示如何在.NET下使用C#+HtmlAgilityPack+XPath进行网页数据的抓取,从而为我们展示了HtmlAgilitypack利器的优点和使 ...