響應式佈局可以為不同終端的使用者提供更舒適的介面和更好的使用者體驗，而且隨著目前大螢幕行動裝置的普及，用"大勢所趨"來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到許多的創新，也看到了一些成形的模式。
行動web前言
行動web ： 行動裝置手機瀏覽器或微信裡面瀏覽的網頁
行動APP ：手機上需要下載安裝的應用程式
1. 行動web介紹
1.1 響應式開發一套程式碼執行多個終端優點:開發快維護快適配好 缺點載入速度慢
1.2 純原生行動web開發一套程式碼運行一個端優點: 載入速度快缺點開發慢 維護慢適配差
#1.3 應用場景:
響應式開發用在一些新建的網站(PC和移動同時出來) 對載入速度要求不是很高
純原生行動web開發一般會用在一些已經有PC端上線的網站再次開發行動端 行動端需要載入速度很快的網站
2. 響應式開發原理
2.1 CSS3的媒體查詢： 透過查詢螢幕的寬度來指定某個寬度區間的網頁佈局
2.2 常見裝置的螢幕寬度
超小螢幕（手機) 768px以下
小螢幕裝置（平板） 768px-992px
-
#中螢幕（舊式電腦） 992px-1200px
#中螢幕（舊式電腦） 992px-1200px
#1
#大螢幕裝置（現代電腦） 1200px以上
2.3 媒體查詢的語法
@media screen and (条件){
//满足条件执行CSS代码
}
and的前后必须有空格 条件通常只有两个 min-width max-width
@media (条件){
//满足条件执行CSS代码
}
可以简写省略 screen and登入後複製
2.4 媒體查詢的寫法的順序和特性
2.4.1 條件判斷有兩種
min-width 螢幕寬度大於等於某個值生效(最小寬度)
max-width 螢幕寬度小於等於某個值的時候生效(最大寬度)
2.4.2 條件判斷的參考值通常有以下4個
width > 1200 大屏幕 大屏PC设备
992 < width < 1200 中屏幕 老式电脑
768 < width < 992 小屏幕 平板设备
width < 768 超小屏幕 手机
登入後複製
2.4.3 媒體查詢判斷的順序說明
- #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;
}
}登入後複製
/*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;
}
}登入後複製
- 2.3.4 寫法的特性有兩個
向上相容只寫了小的判斷, 大的判斷沒有寫, 但是在大螢幕下也會生效
- 向下覆蓋同時寫了小的判斷和大的判斷, 滿足大的條件會生效大的條件的樣式, 大的條件寫在後面會把小的條件的樣式覆蓋
- 2.3.5 使用媒體查詢實現網頁佈局
#在大螢幕下顯示4列中螢幕顯示3列小螢幕顯示2列超小螢幕顯示1列
/*w 768~992 每一行放置两个子元素 50%*/
@media screen and (min-width: 768px){
.box > p{
width: 50%;
}
}
/* w 992~1200 每一行放置三个子元素 33.33%*/
@media screen and (min-width: 992px){
.box > p{
width: 33.33%;
}
}
/*w >1200 每一行放置四个子元素 25%*/
@media screen and (min-width: 1200px){
.box > p{
width: 25%;
}
}登入後複製
- 原理就是透過媒體查詢判斷條件改變盒子的寬度
##3.響應式開發框架Bootstrap介紹
相關連結: 中文官網使用Bootstrap建構的網站
插件: fullpage 功能比較單一隻是實現了網頁裡面的某個或幾個功能
#5. Bootstrap的基本使用5.1 下載: 去Bootstrap官網中文官網的起步裡面下載生產環境的Bootstrap 解壓縮之後把整個資料夾放到專案裡面來也可以使用BootstrapCDN
再引入自己的JS-
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- html5 shiv是为了让低版本IE支持html5新标签 -->
<!-- respond.js是为了让低版本IE支持CSS3媒体查询 -->
<!-- 但是注意respond.js需要在服务器下运行 就是localhost 不能再file下运行不然无法工作 -->
<!-- 条件注释 IE版本小于IE9 条件成立就执行下面的代码 如果条件不成立就是注释不执行 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- bootstrap的JS插件依赖jquery 所以要先引入jquery -->
<script src="lib/jquery/jquery.min.js"></script>
<!-- 在引入Bootstrap的JS文件 -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
登入後複製
5.3 引包的順序-
再引入自己的檔案
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 凡是写移动端页面一来就是加上视口
5.5 浏览器兼容模式
1.
http-equiv="X-UA-Compatible" 表示设置IE浏览器的兼容模式
content="IE=edge" 表示让IE浏览器用最新的渲染引擎渲染页面
6. Bootstrap文档
6.1 基础CSS样式
6.2 预制界面组件
6.3 Javascript 插件
模态对话框 (常用)
下拉菜单 (常用)
滚动监听 (常用)
标签页 (常用)
工具提示
弹出框
警告框
按钮
折叠面板 (常用)
轮播图 (常用)
吸顶效果 (常用)
6.4 Javascript插件依赖情况
-
jQuery
Bootstrap 框架中的所有JS组件都依赖jquery实现
7. 项目搭建
7.1 搭建Bootstrap页面骨架及项目目录结构
├─ /project/ ··················· 项目所在目录
└─┬─ /css/ ······················· 自己的CSS文件
├─ /font/ ······················ 使用到的字体文件
├─ /img/ ······················· 使用到的图片文件
├─ /js/ ························ 自己写的JS脚步
├─ /lib/ ······················· 从第三方下载回来的库【只用不改】
├─ /favicon.ico ················ 站点图标
└─ /index.html ················· 入口文件
登入後複製
7.1.1 约定编码规范
1. HTML约定
在head中引入必要的CSS文件,优先引入第三方的CSS,方便我们自己的样式覆盖
在body末尾引入必要的JS文件,优先引入第三方的JS文件,注意JS文件之间的依赖关系
比如Bootstrap.js 依赖jquery,那就应该先引入jquery.js 然后引用Bootstrap.js
2. CSS约定
除了公共级别的样式,其余样式全部由模块前缀
尽量使用直接子代选择器 少用间接子代选择器避免误杀
7.2 创建主页 引入相应的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="lib/bootstrap/bootstrap.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/bootstrap.js"></script>
<script src="index.js"></script>
</body>
</html>
登入後複製
7.3 在我们默认样式表中讲默认字体设置为
body{
font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
}登入後複製
7.4 完成页面空结构
先划分好页面的大容器,然后具体看每一个容器的单独情况
<!-- 头部区域 -->
<header></header>
<!-- /头部区域 -->
<!-- 广告轮播 -->
<section></section>
<!-- /广告轮播 -->
<!-- 立即预约 -->
<section></section>
<!-- /立即预约 -->
<!-- 产品介绍 -->
<section></section>
<!-- /产品介绍 -->
<!-- 新闻资讯 -->
<section></section>
<!-- /新闻资讯 -->
<!-- 合作伙伴 -->
<section></section>
<!-- /合作伙伴 -->
<!-- 脚注区域 -->
<footer></footer>
<!-- /脚注区域 -->
登入後複製
