前端项目微金所笔记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. element对象

    一.offset.client.scroll clientWidth,clientHeight,clientLeft,clientTop: offsetWidth,offsetHeight,offse ...

  2. POJ.1769.Minimizing maximizer(线段树 DP)

    题目链接 /* 题意:有m个区间,问最少要多少个区间能覆盖[1,n] 注:区间要按原区间的顺序,不能用排序贪心做 设dp[i]表示最右端端点为i时的最小值 dp[e[i]]=min{dp[s[i]]~ ...

  3. ECS——CentOS7下使用yum安装MariaDB

    CentOS 6 或早期的版本中提供的是 MySQL 的服务器/客户端安装包,但 CentOS 7 已使用了 MariaDB 替代了默认的 MySQL.MariaDB数据库管理系统是MySQL的一个分 ...

  4. Altium Designer Summer 09 Gerber 文件设置

  5. java计算今天是今年的第几天

    Calendar.getInstance().get(Calendar.DAY_OF_YEAR)

  6. 大文件拆分方案的java实践（附源码）

    引子 大文件拆分问题涉及到io处理.并发编程.生产者/消费者模式的理解,是一个很好的综合应用场景,为此,花点时间做一些实践,对相关的知识做一次梳理和集成,总结一些共性的处理方案和思路,以供后续工作中借 ...

  7. ie6定位absolute bug触发layout解决

    IE6中很多Bug都可以通过触发layout得到解决,以上的解决方法无论是设置zoom:1还是设置width和height其实都是为了触发layout.下列的CSS属性或取值会让一个元素获得layou ...

  8. Menu实现逻辑

        一.前奏 创建一个WS_EX_NOACTIVATE的窗体 创建窗体后注册Hook消息(鼠标在非Menu区域点击时关闭menu,接收键盘消息用于快捷键,接WM_SETFOCUS消息,当打开新窗体 ...

  9. EBS MOAC

    alter session set nls_language='SIMPLIFIED CHINESE';alter session set nls_language ='AMERICAN'; exec ...

  10. Python打包方法——Pyinstaller

    Python版本:Python3.5.2 一.安装Pyinstaller 1.安装pywin32 下载安装文件:查找到跟自己适用的python版本及window系统版本匹配的pywin32,下载后安装 ...