前端项目微金所笔记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. Scala面向接口

    trait Logger{ def log(message:String){ println("Logger:"+message) } } trait RichLogger ext ...

  2. FutureTask实现超时任务

    最近主要在弄一些c/s的东西,以及对接一些外部的接口. 记下一些感觉有用的东西吧. java在1.5之后有Callable和Future可以获得任务执行完毕后的结果 结合ExecutorService ...

  3. IBM NOTES

    归档含义 邮件容量超过指定的邮件服务器的容量时,会受到警告信息.选择 Archive-Settings 可以设置邮件备份的规则,把邮箱里的部分邮件转移到本地的另一个指定文件夹(如 图 4).当您需要做 ...

  4. 在webpack中使用postcss之插件cssnext

    学习了precss插件包在webpack中的用法后,下面介绍postcss的另一个重要插件cssnext,步骤没有precss用法详细,主要介绍css4的语法,cssnext目前支持了部分新特性,你可 ...

  5. VMware workstation12 密匙

    VMware workstation12 密匙:5A02H-AU243-TZJ49-GTC7K-3C61N

  6. Intellij IDEA 通过数据库表逆向生成带注释的实体类文件超级详细步骤，附详细解决方案

    参考:https://blog.csdn.net/qq_34371461/article/details/80571281  https://blog.csdn.net/mqchenrong/arti ...

  7. Core Animation学习总结

    文件夹: The Layer Beneath The Layer Tree(图层树) The Backing Image(寄宿层) Layer Geometry(图层几何学) Visual Effec ...

  8. Go语言之高级篇Beego框架之爬虫项目实战

    一.爬虫项目 1.爬虫基础 a.网页上面会有相同的数据 b.去重处理 布隆过滤器哈希存储 c.标签匹配: 正则表达式beautiful soup或lxml这种标签提取库 d.动态内容 phantomj ...

  9. 连接mysql 出现：java.sql.SQLException: Unable to load authentication plugin 'caching_sha2_password'.

    数据测试的时候出现: 网上查资料说的是mysql5.x 版本和 8.x版本的区别: 5.7版本是:default_authentication_plugin=mysql_native_password ...

  10. 微软BI 之SSIS 系列 - 带有 Header 和 Trailer 的不规则的平面文件输出处理技巧

    案例背景与需求介绍 之前做过一个美国的医疗保险的项目,保险提供商有大量的文件需要发送给比如像银行,医疗协会,第三方服务商等.比如像与银行交互的 ACH 文件,传送给协会的 ACH Credit 等文件 ...