前端项目微金所笔记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. egrep 实用参数

    -n :顺便输出行号 -v :反向选择,亦即显示出没有 '搜寻字符串' 内容的那一行!-r : --recursive  -i :忽略大小写的不同,所以大小写视为相同 -c :计算找到 '搜寻字符串' ...

  2. 如何开发一个npm包并发布

    一.安装nodejs 不多说了,网上教程多得是 二.创建自己的npm包 目录结构 npm-test a.js b.js package.json 开发 为了简单便于理解,就开发一个简单地hello程序 ...

  3. Python图形编程探索系列-09-tkinter与matplotlib结合案例

    案例1 案例来自于:https://bbs.csdn.net/topics/390326088 代码示例: import matplotlib matplotlib.use('TkAgg') from ...

  4. Django-自定义增删改查组件的一些体会

    1.路由系统 namespace,用于区分相同name的url,通过namespace为url添加一个前缀 反向生成URL的时候 reverse('namespace:name') {% url &q ...

  5. 【springboot】【socket】spring boot整合socket,实现服务器端两种消息推送

    参考地址:https://www.cnblogs.com/hhhshct/p/8849449.html

  6. centos npm 安装后 command not found

    ok,

  7. bugly中批量隐藏版本

    App项目使用Bugly的内测分发功能进行整包的测试,但日积月累之后,版本就会特别多.而线上同时跑的版本可能不过三个左右,那么多版本会干扰到查看崩溃.选择版本,如何隐藏呢? 右上角,更多 –> ...

  8. Visual Studio 打开程序提示仅我的代码怎么办

    工具-->选项--->调试---->常规-->禁用"启动仅我的代码"

  9. Ubuntu上安装git和创建工作区和提交文件！！！

    1.安装git: sudo apt-get install git 2.创建工作区: 创建一个文件夹,sudo mkdir 文件文件夹.告诉git这是个工作区文件夹,sudo git init 文件夹 ...

  10. Load 和 DOMContentLoaded 区别

    Load 事件触发代表页面中的 DOM,CSS,JS,图片已经全部加载完毕. DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析,不需要等待 CSS,JS,图片加载.