响应式布局开发

摘要：目录移动介绍和两种开发方式响应式开发方式原生的开发方式响应式的原理的媒体查询响应式开发框架的介绍和基本信息优势版本了解框架和库的区别主导者不一样入门起步下载和引包阅读的文档了解常用的全局样式和组件和插件搭建项目目录结构创建主页引包设置网

移动web介绍和两种开发方式(响应式开发方式 原生的开发方式)

响应式的原理(CSS3的媒体查询)

响应式开发框架(Bootstrap) 的介绍和基本信息-优势-版本

了解框架和库的区别 主导者不一样

入门Bootstrap 起步 下载和引包

阅读Bootstrap的文档 了解常用的全局CSS样式 和 组件 和JS插件

搭建项目目录结构

创建主页引包 设置网页字体和空结构

字体图标的生成 和使用

总结

移动web ： 移动端手机浏览器或者微信里面浏览的网页

移动APP ： 手机上需要下载安装的应用程序

响应式开发用在一些新建的网站(PC和移动同时出来) 对加载速度要求不是很高

纯原生移动web开发 一般会用在一些已经有PC端上线的网站 再次开发移动端 移动端需要加载速度很快的网站

超小屏幕（手机）    768px以下
小屏设备（平板）    768px-992px
中等屏幕（旧式电脑）   992px-1200px
大屏设备（现代电脑）   1200px以上

    @media screen and (条件){
        //满足条件执行CSS代码
    }

    and的前后必须有空格  条件通常只有两个 min-width max-width

    @media (条件){
        //满足条件执行CSS代码
    }

    可以简写省略 screen and

min-width 屏幕宽度大于等于某个值生效 (最小宽度)
max-width 屏幕宽度小于等于某个值的时候生效 (最大宽度)

  width > 1200  大屏幕 大屏PC设备
  992 < width < 1200  中屏幕 老式电脑
  768 < width < 992  小屏幕 平板设备
  width < 768 超小屏幕 手机

1.如果使用min-width条件判断的时候 条件判断大小 要从小到大写

  /*min-width: 768px 当屏幕的宽度大于等于768时 背景颜色为green */
  @media screen and (min-width: 768px){
      body{
          background-color: green;
      }
  }

  /*min-width: 992px 当屏幕的宽度大于等于992时 背景颜色为blue*/
  @media screen and (min-width: 992px){
      body{
          background-color: blue;
      }
  }

  /*min-width: 1200px 当宽度大于等于1200时 背景颜色为pink*/
  @media screen and (min-width: 1200px){
      body{
          background-color: pink;
      }
  }
  

2.如果使用max-width条件判断到时候 条件判断大小 要从大到小写

  /*max-width: 1200px:宽度在1200以下*/
  @media screen and (max-width: 1200px) {
      body {
          background-color: green;
      }
  }

  /*max-width: 992px:宽度在992以下*/
  @media screen and (max-width: 992px) {
      body {
          background-color: blue;
      }
  }

  /*max-width: 768px:宽度在768以下*/
  @media screen and (max-width: 768px) {
      body {
          background-color: pink;
      }
  }

向上兼容 只写了小的判断, 大的判断没有写, 但是在大屏幕下也会生效

向下覆盖 同时写了小的判断和大的判断, 满足大的条件会生效大的条件的样式, 大的条件写在后面会把小的条件的样式覆盖

在大屏幕下显示4列 中屏幕显示3列 小屏幕显示2列 超小屏幕显示1列

  /*w 768~992  每一行放置两个子元素  50%*/
  @media screen and (min-width: 768px){
      .box > div{
          width: 50%;
      }
  }
  /* w 992~1200 每一行放置三个子元素  33.33%*/
  @media screen and (min-width: 992px){
      .box > div{
          width: 33.33%;
      }
  }
  /*w >1200 每一行放置四个子元素 25%*/
  @media screen and (min-width: 1200px){
      .box > div{
          width: 25%;
      }
  }

原理就是通过媒体查询判断条件改变盒子的宽度

特点：灵活简介，代码优雅，美观大方

好处：Bootstrap 让我们的Web开发更简单，更快捷

版本：目前市面上使用最多的是3.x.x版本 除此之外还有2.3.2对IE8支持 现已有4.0.0的正式版

相关链接: 中文官网 使用Bootstrap构建的网站

jquery : 库 便捷的DOM (你想实现什么功能就调用什么方法)(主导者是你 你调用库)

Bootstrap : 框架 界面工具集 框架是他来控制你 (框架制定好了一系列规则 用户按照规则进行编写)可以实现整个网站大多数功能

插件 : fullpage 功能比较单一 只是实现了网页里面的某个或几个功能

先引入Bootstrap的CSS(如果想要主题可以在引入带主题的CSS)

再引入自己的CSS

先引入jquery(因为Bootstrap依赖jquery)

再引入Bootstrap的JS

再引入自己的JS

先引入第三方的框架

再引入自己的文件

CSS放到head里面引入(有些特殊的JS文件对页面渲染有作用的要放到head中)

js放到body结束标签是上面引入

视口: 浏览器的可视窗口 在PC端是会受到浏览器窗口变化而变化

视口在PC端是可视窗口(会变的) 在移动端有一个固定的值 通常是默认980

但是默认移动端的时候980会造成网页的缩放或者出滚动条

解决移动端默认视口会造成网页缩放和滚动条 设置meta标签设置默认是视口的宽度等于设备的宽度

视口的其他属性 初始化缩放 initial-scale=1.0 是否允许用户缩放 user-scalable=no 最大 maximum-scale=1.0 和最小缩放 minimum-scale=1.0

meta:vp+tab 凡是写移动端页面一来就是加上视口

1.

http-equiv="X-UA-Compatible" 表示设置IE浏览器的兼容模式

content="IE=edge" 表示让IE浏览器用最新的渲染引擎渲染页面

概要 (常用)

布局容器

栅格系统 (常用)

xs : 超小屏幕 手机 (<768px)

sm : 小屏幕 平板 (≥768px)

md : 中等屏幕 桌面显示器 (≥992px)

lg : 大屏幕 大桌面显示器 (≥1200px)

预置排版样式

统一预制标签样式

文本对齐 (常用)

改变大小写

代码样式

页面输出代码

表格样式

各种表格样式

表单样式

各种表单组合的样式

按钮样式

各种按钮颜色 和 按钮大小等样式 (常用)

图片样式

图片圆角的样式

辅助工具类

内容块居中 (常用)

快速浮动 和 清除浮动 (常用)

显示隐藏 (常用)

响应式工具类 (常用)

hidden-xx : 在某种屏幕下隐藏

visible-xx : 在某种屏幕尺寸下显示

基础CSS这块只是将我们常用想一些元素的样式做了美化,如果需要使用直接拿过来用就行了

导航 (常用)

导航条 (常用)

面包屑导航

下拉菜单 (常用)

按钮式下拉菜单

按钮组

输入框组

警告框

页头

分页

列表组 (常用)

面板 (常用)

媒体对象 (常用)

进度条

Glyphicons字体图标 (常用)

标签

徽章

缩略图

大屏幕

嵌入内容

内嵌

将我们日常使用的一些功能块例如下拉菜单,提前写好,我们使用时直接找到对应的demo然后拿回来做相应调整就行了

模态对话框 (常用)

下拉菜单 (常用)

滚动监听 (常用)

标签页 (常用)

工具提示

弹出框

警告框

按钮

折叠面板 (常用)

轮播图 (常用)

吸顶效果 (常用)

data-spy="affix"

data-offset-top="什么位置出现"

data-offset-bottom="什么位置消失"

jQuery

Bootstrap 框架中的所有JS组件都依赖jquery实现

├─ /project/ ··················· 项目所在目录
└─┬─ /css/ ······················· 自己的CSS文件
  ├─ /font/ ······················ 使用到的字体文件
  ├─ /img/ ······················· 使用到的图片文件
  ├─ /js/ ························ 自己写的JS脚步
  ├─ /lib/ ······················· 从第三方下载回来的库【只用不改】
  ├─ /favicon.ico ················ 站点图标
  └─ /index.html ················· 入口文件

1. HTML约定

在head中引入必要的CSS文件,优先引入第三方的CSS,方便我们自己的样式覆盖

在body末尾引入必要的JS文件,优先引入第三方的JS文件,注意JS文件之间的依赖关系

比如Bootstrap.js 依赖jquery,那就应该先引入jquery.js 然后引用Bootstrap.js

2. CSS约定

除了公共级别的样式,其余样式全部由模块前缀

尽量使用直接子代选择器 少用间接子代选择器避免误杀

body{
  font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
}

先划分好页面的大容器,然后具体看每一个容器的多带带情况

col-xs-[列数]：在超小屏幕下展示几份

col-sm-[列数]：在小屏幕下展示几份

col-md-[列数]：在中等屏幕下展示几份

col-lg-[列数]：在大屏幕下展示几份

xs : 超小屏幕 手机 (<768px)

sm : 小屏幕 平板 (≥768px)

md : 中等屏幕 桌面显示器 (≥992px)

lg : 大屏幕 大桌面显示器 (≥1200px)

此处顶部通栏已经被划分为四列
text-center的作用就是让内部内容居中显示

@font-face {
    font-family: "itcast";
    src: url("../fonts/MiFie-Web-Font.eot") format("embedded-opentype"), url("../fonts/MiFie-Web-Font.svg") format("svg"), url("../fonts/MiFie-Web-Font.ttf") format("truetype"), url("../fonts/MiFie-Web-Font.woff") format("woff");
}

[class^="icon-"],
[class*=" icon-"] {
    /*注意上面选择器中间的空格
我们使用的名为itcast的字体就是最上面的@font-face的方式声明*/
    /*当字体名字之间有空格的都要用引号引起来 ,如果没有空格的话可以不用引号*/
    font-family: itcast;
}

eot : embedded-opentype

svg : svg

ttf : truetype

woff : woff

进入 https://icomoon.io/ 网站

点击右上角 icomoonApp

点击左上角 import icons

选中所有导入的图标

点击右下角 generate font

点击左上角 preferences 设置字体名称 和 类名前缀

点击download

解压生成好的压缩包 里面有demo.html

打开demo.html能够查看图标对应类名

使用 的时候 把 fonts文件夹放到项目 并且引入style.css（这里面就定义了那些图标的类名）

得下载或者生成或者去借(去别的网站拿)一个字体文件

使用@font-face定义一个字体名称

先指定字体的名称font-family:"字体名称";

引入这个字体名称对应的字体文件 如果不考虑兼容只引入ttf src:url(路径.ttf) format("truetype")

定义一个图标的类名来使用图标

先使用图标对应的字体名称font-family:"字体名称";

指定图标的编码放到类名的伪元素的content里面 content: "e945";

清除默认的斜体

在页面使用定义好的图标的类名就可以了

移动web ： 移动端浏览器显示的网页

移动web的两种开发方式

响应式开发方式：一套代码运行多个终端 开发快维护快加载慢 适配好 用在一些新建的网站对速度要求不高的

纯原生移动web开发 ：分别写两套代码 开发慢维护慢加载快 适配差 用在一些已经上线的了PC再次开发移动web 对加载速度要求高的网页

响应式开发原理

CSS3媒体查询实现

媒体查询语法

  @meida screen and (){

    sreen and 可以省略 如果不省略 and前后要有空格

  }

媒体查询的条件判断和顺序说明

1. 媒体查询有两个条件判断 min-width: 屏幕宽度大于等于某个值成立 条件判断要从小到大写
2. max-width：屏幕宽度小于等于某个值成立 条件判断要从大到小写

媒体查询的特性

1. 向上兼容 ： 没有写大的判断 也能生效小屏幕的判断
2. 向下覆盖 ： 同时写了小和大屏幕的判断 大屏幕在后面会覆盖小屏幕的样式

响应式开发框架Bootstrap： 灵活简介 代码优雅 美观大方

使用Bootstrap框架

下载

引入bootstrap

  1. 先引入bootstrap.css
  2. 引入jquery
  3. 引入bootstrap.js

视口 : 浏览器可视窗口移动端设置视口和设备一样宽

布局容器 .container : 固定宽度且居中 .container-fluid 宽度100%

栅格系统

栅格系统的4个档次
col-xs w<768
col-sm 768col-md 992col-lg w>1200

栅格系统默认一行分为12列
分成4列 col-xx-3
分理3列 col-xx-4
分理2列 col-xx-6
分理1列 col-xx-12

搭建项目 fonts css/font.css img lib

创建Index.html 引包 先引入第三方 再引入自己的

创建页面的骨架

搭建顶部通栏 .container>.row>col-md-2col-md-5col-md-2col-md-3

字体图标

bootstrap官方图标 组件->字体图标 拷贝图标类名即可

自己生成字体图标 icomoon.io网站生成

引入生成好的字体图标样式文件同时字体文件要放在旁边

bootstrap的按钮 全局CSS -> 按钮