前端知识点总结—-响应式

前端知识点总结—-响应式

1.Responsive Web Page:响应式网页/自适应的网页2010年提出,

 一个网页,会自动根据用户浏览设备不同,自动必变布局,
 可以被PC/PAD/PHONE 正常浏览

2:响应式网页必备

(1)流式布局 float:left;
(2)可以改变尺寸图片文字 font-size:1em;
响应式布局不足:代码更加复杂,不适合大型网页

3:如何测试网页

(1)使用真实物理设备
(2)使用第三方模拟器软件
(3)使用chrome 内置设备模拟器

4:如何编写响应式网页

 (1)声明viewport元标签
 <meta name="viewport" content="width=device-width, initial-scale=1">

viewport 元标签
早期3G手机为浏览器大尺寸网页,只能强行页面缩小,
导致图片/文字/链接
IOS提出”视口”概念:虚拟窗口,大小与设备相同,如
浏览大型网页,滑动.
Android 也借鉴该概念

 width=device-width   视口宽度=设备宽度
  initial-scale=1        表示初始化视频大小1原始大小
 user-scalable=no      用户是不顺可以调整视频大小

 (2)使用流式布局
   实现方法:float:left

(3)所有容器使用相对尺寸,不用绝对尺寸
.container{
/width:500px;/
width:50%;
}

(4)所有文字使用相对尺寸,不用绝对尺寸
body{
/font-size:12px;/
font-size:2em;
}

(5)所有图片使用相对尺寸,不用绝对尺寸
img{
width:25%;
}

(6)(最重要原则)使用CSS3 Media Query技术

5: CSS3 Media Query技术

  Media:指浏览网页的设备,如screen(pc/pad/phone),print,tv,tty.
  Media Query:查询当前浏览网页设备类型,以及特性(对比度,尺尺,手持方向等),
  而选择性执行某些css代码,而忽略另外一些.
  媒体查询使用方法两种

(1) 根据媒体查询结果执行不同的css文件

    <link  media=”screen”    href=”1.css”/>
    <link  media=”print”     href=”2.css”/>

(2) 根据媒体查询结果执行css片段中不同部分

6:自定义响应式布局(重点)

(1)声明viewport 视口
(2)流式布局
(3)所有容器.文字.图片:相对尺寸不同绝对尺雨
(4)使用CSS3 Media Query

7: CSS3 Media Query查询方式

(1)根据媒体查询结果执行不同css文件(少)
(2)根据媒体查询结果执行不同css片段(多)

 @media screen and (min-width:768px) and (max-width:991px){

选择器{样式设定}
}

8:Bootstrap 全局样式

bootstrap: 起步/引导程序
8.1:Twitter Bootstrap 框架
#官方网站 http://www.bootcss.com/
Bootstrap是一个HTML/CSS/JS 框架,用于开发响应式布局,移动设备优先项目.
(1)起步
(2)全局CSS样式(重要—{栅格布局})
(3)组件
(4)js插件(图片轮播)
(5)定制—自定义bootstarp 样式
提示:Bootstrap 知识点不难,1000+单词记忆

8.2:起步
下载 css fonts js
基本模板
<html lang=”zh-CN”>
language:指定当前网页所使用自然语言,如zh-CN zh-hk en-US ja
作用两个:为浏览器的翻译功能确定基础语言,为读屏软件确定基础发音
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
扩展HTTP响应头消息
指定IE浏览器的兼容性-仅IE浏览器支持可以识别
网景<==>微软 IE
IE 6 内核6
IE 7 内核6/7
IE 8 内核6/7/8
IE 9 内核6/7/8/9
IE 10 内核6/7/8/9/10
IE 11内核6/7/8/9/10/11

html5shiv.js
第三方编写的js文件,让老IE兼容html5新标签… header..
respond.js
第三方编写的js文件,让老IE兼容 CSS3 Media Query

8.3:Bootstrap 全局样式—按钮

.btn 按钮的基础样式
.btn-default 白底黑字的按钮
.btn-danger/warning/success/info/primary 五种颜色的按钮
.btn-lg/sm/xs 按钮四种大小
.btn-block 块级按钮

8.4:Bootstrap 全局样式—图片

.img-rounded    圆角图片
.img-circle       圆形图片
.img-thumbnail   缩略图
.img-responsive  响应式图片

8.5:Bootstrap 全局样式—文本

.text-danger/success/warning/info/primary 文字颜色
.bg-danger/success/warning/info/primary 背景颜色
.text-left/center/right/justify 对齐方式
.text-uppercase/lowercase/capitalize

8.6:Bootstrap 全局样式—列表

.list-unstyle 去除提示符号
.list-inline 行内列表

9:Bootstrap 全局样式-(屏幕分类)

(1)大型PC屏幕            lg    w>=1200px
(2)中等PC屏幕            md   1200px>w>992px
(3)小型PAD屏幕           sm   992px>w>768px
(4)超小PHONE屏幕        xs    768px>x

9.1:Bootstrap 全局样式-表格

.table
.table-bordered   带边框的表格
.table-striped     隔行变色
.table-hover      带悬停变色
.table-responsive  响应式表[添加特殊要求]

Bootlint 是Bootstrap官方提供HTML检测工具,检测出网页中常见的HTML/CSS错误,还能检测class层级结构错误!

9.2:Bootstrap 全局样式-栅格(重点)

网页布局可用方法:
(1) TABLE布局
好处:简单易控制
不足: 语义错误,页面渲染效率低

(2) DIV+CSS布局
好处: 语义正确,页面渲染效率高
不足: 不容易控制

(3)Bootstrap 栅格
好处:相对简单易于控制,渲染效率高,支持响应式
不足:页面简单

使用方法:
(1) 最外层必须使用容器
div.container和div.container-fluid

(2) 容器里可以放置任何内容,若想使用栅格,必须div.row
.container > .row [行]

(3) 一个.row中不能放置其他内容,只能放置 .col,列中可以放置其它内容
.container > .row > .col

(4) Bootstrap中行默认12均等分,每个列必须指定行中占比

(5) 栅格系统针对不同屏幕提供不同列
.col-lg-1/2/3…/12
.col-md-1/2/3../12

       .col-sm-1/2./3../12
       .col-xs-1/2./...12
       

(6) 可以使用”列偏移”实现指定列及其后的列向右偏移的效果.
如果不足12列居右对齐

   .col-lg-offset-1/2...12
   .col-md-offset-1/2...12
   .col-sm-offset-1/2...12
   .col-xs-offset-1/2...12
   

(7) 需要注意不同屏幕下列的适全性问题
.col-xs-* 适用于xs/sm/md/lg 屏幕

   .col-sm-*   适用于 sm/md/lg  屏幕
   .col-md-*   适用于 md/lg 屏幕
   .col-lg-*    适用于 lg 屏幕
   

(8) 一个列可以指定在不同屏幕下的宽度占比
div.col-xs-12/.col-sm-9/.col-md-6

   div.col-xs-12/col-md-6
   常见错误:  div.col-xs-6/.col-md-6
   

(9) 一个列可以指定特定的屏幕隐藏

    .hidden-xs  仅在xs屏幕下隐藏
    .hidden-sm 仅在sm屏幕下隐藏
    .hidden-md 仅在md屏幕下隐藏
    .hidden-lg  仅在lg 屏幕下隐藏
    .hidden

10:Bootstrap 栅格式系统

10.1:Bootstrap 表单
(1)默认表单

 <form>
     <div class=”form-group”>
       <label class=”control-label”>用户名</label>
       <input type=”text” class=”form-control”/>
       <span class=”help-block”>用户名格式:6~12位</span>
     </div>
 </form>

(2)行内表单

  <form>
     <div class=”form-inline”>
       <input type=”text” class=”form-control”/>
       <span class=”sr-only”>用户名格式:6~12位</span>
     </div>
 </form>

(3)水平表单

 水表表单=表单+栅格系统
 
默认栅格系统    水平表单

最外层元素 div.container form.form-horizontal
行 div.row div.form-group
列 div.col- div.col-
<form class=” form-horizontal”>

 <div class=”form-group”>
   <div class=”col-*-*”>
         <label class...

</div>

 </div>

</form>

10.2:Bootstrap 组件—(下拉菜单:字体图标:导航条-重点)

下拉菜单三级结构
<div class=”dropdown”>

 <a href=”#” data-toggle=”dropdown”>触发元素</a>
 <div/ul class=”dropdown-menu”>隐藏元素</div/ul>

</div>

10.3: Bootstrap 组件—(字体图标)

web项目中常用图标字体
(1)FontAwesome – 675 个免费图标
(2)Glyphicons – 800 个收费图标
服务器字体使用
(1)web 服务器项目目录下必需有字体文件
(2)css中声明一个新的字体文件,并且指定下载位置

 @font-face {
   font-family: 'Glyphicons Halflings';
   src: url('../fonts/glyphicons-halflings-regular.eot');
   src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')   

}
(3)声明一个基础class 使用字体

 .glyphicon{
    font-family: 'Glyphicons Halflings';

}
(4)在html页面中输入图标对应编码

10.4: Bootstrap 组件—(进度条)

.progress > .progress-bar

10.5: 面包屑 .bread-crum /徽章/巨幕/水井

11:Bootstrap第四部分:jquery插件—折叠(手风琴)

 <a data-toggle=”collapse” href=”my-target1”>触发元素</a>
 <button data-toggle=”collapse” data-target=”my-target1”>触发元素</button>
 <div id=”my-target1” class=”collapse in”>展开收起元素</div>

12:弹幕

1:html

 <canvas id=”can1”/> 显示弹幕文字
 <canvas id=”can2”/> 视频画在画布上
 (1)视频按照图片绘制画布上 ctx2.drawImage();
 (2)创建定时器[]/循环绘制视频
 (3)视频元素动态创建追加 body最后子元素并且隐藏

2:js
3:目录结构

 index.html
  js/ video.js             完成:视频显示
     data.js             完成:弹幕
     公共函数库文件
  res/1.mp4             视频文件

13:Bootstrap js插件—(导航条)

.navbar-toggle 媒体查询:屏幕宽度大于768px 就隐藏
.navbar-collapse 媒体查询:屏幕宽度大于768px 绝对定位在
.navbar-header内;否则相对定位.navbar-header

14:视频项目

<video src=”” autoplay loop controls muted poster=””
preload=””></video>
video 弱 [不能对视频加密/视频丢失]
video 弱 直播不行
强 微信 小程序 公众号 [pc/pad/ios/android]

14.1:同层播放 (苹果手机)
当点击视频播放,IOS手机默认行为,自动将视频弹出在一个独立,
窗口播放.(二个窗口)
解决问题:同一层窗口播放视频
在<video>标签中添加二个属性
webkit-playsinline=”true” (IOS)让频视在小窗口内播放,
能不同跳出全屏播放
playsinline=”true” (IOS)微信浏览器支持小窗口内播放
x5-video-player-type=”h5″ (Android)同层播放

示例:
<video webkit-playsinline=”true” playsinline=”true”
x5-video-player-type=”h5″ ></video>

解决问题: 全屏设置如果不设置如下属性,横屏会错位
x5-video-player-fullscreen=”true”
全屏设置对过监听resize事件实现 (Android )
x5-video-orientation=”portraint”>

14.2:video 专用样式
object-fit:选项
(1) fill默认 失真
(2) contain 包含(留白)
(3) conver 覆盖(调整视频比例)

14.3:video 事件

  (1)canplaythought  可以播放视频,视频全部加载完成
    #iphone 点击播放
    #android 可以加完成触发事件
  (2)ended  播放结束

15:less两种使用方法

(1)在客户端使用—学习(效率差)
编写一个x.less
在HTML中引入x.less文件,同时再引入LESS编译程序:
less.js
客户端请求html,下载x.less以及less.js 在客户端运行js文件
less编译为css
会减慢客户端样式的呈现速度

(2)在服务器端使用-Less(必需掌握)

编写x.less
在开发电脑安装less编译环境(Nodejs/lessc),执行x.less编译x.css
再编写html文件,引入编译x.css

客户端发出请求html/下载css

15.1:LESS语法

(1)Less支持所有CSS语法
(2)Less支持多行/单行注释
/**/ 多行注释
// 单行注释—推荐使用(注释内容不会编译css文件)
(3) Less 支持(变量)
定义:@变量名:值;
使用:color:@变量名;
变量可以取值为任何合法样式值
(4)Less 支持变量和常量算术运算

      • / %

(5)less支持一个选择器中”混入”另一个选择器的样式
选择器1{…}
选择器2{.. 选择器1}
(6)less在样式混入时可以指定参数
选择器1(@参数1,@参数2..){}
选择器2{选择器1(值1,值2…)}
(7)less支持样式嵌套(*)
选择器1{

选择器2{

}
}
上述代码会被编译为:
选择器1{}
选择器 2{}

15.2:通过修改Bootstrap的less源文件实现定制

达到三个目标
(1)瘦身:删除不需要样式
(2)粗粒度定制

 只需要修改variables.less中定的变量值即可

(3)细粒度定制 针对某个组件细节修改

 修改组件对应less文件.  dropdown.less

15.3:如何实现定制

(1)下载并且安装nodejs – (js解析器)

 在命令行  node –v  可以看到版本信息

(2)下载less编译程序

 e:\node_modules\less\bin\lessc
 示例:
 e:\node_modules\less\bin\lessc  x.less  x.css


15.4: 定制Bootstrap

(1) 查找software/bootstrap/less
(2) e:node_moduleslessbinlessc less/bootstrap.less bootstrap.css

    原文作者:楷楷
    原文地址: https://segmentfault.com/a/1190000013369639
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞