前端项目微金所笔记1

基础的bootstrap模板

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

Compatible(兼容)

<meta http-equiv="X-UA-Compatible" content="IE=edge">
  • 此属性为文档兼容模式声明,表示如果在IE浏览器下则使用最新的标准渲染当前文档

Viewport(视口)

<meta name="viewport" content="width=device-width, initial-scale=1">
  • 视口的作用: 在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备那么大,然后展示
  • 目前大多数手机浏览器的视口(承载页面的容器)宽度都是980;
  • 视口的宽度可以通过meta标签设置
  • 此属性为移动端页面视口设置,当前值表示在移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1)
    • width: 视口的宽度
    • initial-scale: 初始化缩放
    • user-scalable: 是否允许用户自行缩放(取值: yes/no;1/0)
    • minimum-scale: 最小缩放,一般设置了user-scalable = no(用户不允许缩放),就没有必要设置最小和最大缩放了
    • maximum-scale: 最大缩放

条件注释

  • 条件注释的作用是当判断条件满足的时候,就会执行注释中的HTML代码,不满足时会当做注释忽略掉
    <!--[if lt IE 9]>

    <script src="lib/html5shiv/html5shiv.min.js"></script>

    <script src="lib/respond/respond.min.js"></script>

    <![endif]-->

第三方依赖

Bootstrap框架中的所有JS组件都是依赖于jQuery实现

让低版本的浏览器可以识别HTML5的新标签,如header,footer,section等

让低版本的浏览器可以支持CSS媒体查询功能

MediaQuery媒体查询

@media (判断条件（针对于当前窗口的判断）){

    /*这里的代码只有当判断条件满足时才会执行*/

}
  • 最大宽度max-width - 媒体类型小于或等于指定的宽度时,执行代码
@media screen and (max-width:480px){

 .ads {

   display:none;

  }

}
  • 最小宽度min-width - 媒体类型大于或等于指定宽度时,样式生效
@media screen and (min-width:900px){

.wrapper{width: 980px;}

}
  • 多个媒体特性使用 - 关键词and,案例中的意思是当媒体宽度在768和922之间时,执行代码
@media (min-width: 768px) and (max-width: 992px) {

  .container {

    width: 750px;

  }

}

Media所有参数汇总

  • width:浏览器可视宽度。
  • height:浏览器可视高度。
  • device-width:设备屏幕的宽度。
  • device-height:设备屏幕的高度。
  • orientation:检测设备目前处于横向还是纵向状态。
  • aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
  • device-aspect-ratio:检测设备的宽度和高度的比例。
  • color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
  • color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
  • monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
  • resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
  • grid:检测输出的设备是网格的还是位图设备。

前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询的更多相关文章

  1. Bootstrap 4/3 页面基础模板 与 兼容旧版本浏览器

    Bootstrap 3 与 4 差别很大,目录文件结构.所引入的内容也不同,这里说说一下 Bootstrap 引入的文件.网页模板和兼容性问题.本网站刚刚搭建好,正好发一下文章原来测试网站. Boot ...

  2. VUE 前端项目优化方法

    前端项目通过webpack打包会生成app.js和vendor.js,如果第三方组件依赖过多,会造成打包后的vendor.js过大,页面首次加载的时候会出现白屏时间过长,影响用户体验.对此,我们需要通 ...

  3. Bootrap 项目实战（微金所前端首页）第二部分（首页源码）

    首页源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. Bootrap 项目实战（微金所前端首页）第一部分

    微金所前端首页成果图:(这是本人自己按照微金所官网首页,采用Bootrap,JS,JQuery,css制作的网页效果图,在第二部分我会公布网页源代码) 如需网页源代码,请在下方留言,备注你的qq邮箱. ...

  5. 使用Bootstrap建立网站微金所——头部

    1.微金所链接:http://www.weijinsuo.com/ 2.头部分为:topbar和nav上下两个部分 (1)topbar详解 topbar使用bootstrap的栅格系统 (2)nav分 ...

  6. 如何在前端项目中引用bootstrap less？

    在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的cs ...

  7. [Vue 牛刀小试]：第十七章 - 优化 Vue CLI 3 构建的前端项目模板（1）- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  8. 如何使用 vue-cli 3 的 preset 打造基于 git repo 的前端项目模板

    vue-cli 之 Preset vue-cli 插件开发指南 TLDR 背景介绍 vue-cli 3 完全推翻了 vue-cli 2 的整体架构设计,所以当你需要给组里定制一份基于 vue-cli ...

  9. vue-cli3 搭建的前端项目基础模板

    基于 vue-cli3 搭建的前端模板,fork 或 clone 本仓库,即可搭建完成一个新项目的基础模板,源码地址,欢迎 star 或 fork 特性 CSS 预编译语言:less Ajax: ax ...

随机推荐

  1. JavaFx 中常见的包和类（javafx笔记 ）

    JavaFx 中常见的包和类(javafx笔记 ) 更多详细内容请参考<Pro JavaFX 8>. javafx.stage 包包含以下类: Stage 类 ​ Stage 类是任何 J ...

  2. 数据库中,表一sum得出一个值,赋给表二的某个字段,为null

    尝试使用了isnull(arg1,arg2)函数表示无效 最后运用了COALESCE(arg1,arg2,arg3,...) 该函数标识返回参数中第一个不为null的值. update  a set ...

  3. Java 之递归删除目录

    Java 之递归删除目录 一.思想 必须从最里层的文件开始删除,使用递归删除. 二.源代码:RecursiveDeleteDirectory.java package cn.com.zfc.day01 ...

  4. python的条件与循环1

    一.if语句 功能 计算机又被称作电脑,意指计算机可以像人脑一样,根据周围环境条件(即expession)的变化做出不同的反应(即执行代码) if语句就是来控制计算机实现这一功能. if语句小结 if ...

  5. 2016年3月11日Android学习日记

    1.调试技巧:当一次调试过后,可以在App重新返回当前的状态,然后再调试,而不用再点击Android studio的Debug按钮. 参考:http://www.2cto.com/kf/201506/ ...

  6. C++.Linux下redis编程：error while loading shared libraries: libhiredis.so.0.13

    编译 sudo gcc -o sltest01 sltest01.c -L/usr/local/lib/ -lhiredis 运行 sudo ./sltest01 编译成功后运行报错信息: ./slt ...

  7. Javascript中快速退出多重循环的技巧

    在双重循环或多重循环中判断条件,条件符合时跳出整个嵌套循环体是常见的程序逻辑.在Javascript中有哪些跳出的方法呢?楼主简单整理了一下. 一. 使用多个break语句跳出 var breaked ...

  8. ZwQuerySystemInformation枚举内核模块及简单应用

    简单说,即调用第11号功能,枚举一下内核中已加载的模块.部分代码如下://功能号为11,先获取所需的缓冲区大小ZwQuerySystemInformation(SystemModuleInformat ...

  9. Oracle EBS 12.2.6 on VirtualBox

    Back in May, Oracle announced the general availability of Oracle VM Virtual Appliance for E-Business ...

  10. Unity Shader-后处理：高斯模糊

    一.简介   上一篇文章学习了模糊的原理以及基本的模糊实现,对于清晰和模糊这个定义感觉还是比较说明问题,这里再贴出一下:“清晰的图片,各个像素之间会有明显的过渡,而如果各个像素之间的差距不是很大,那么 ...