前端项目微金所笔记1

基础的bootstrap模板

      
        
        
        
        
            
        
        
        
        
            
Hello, world!
    
            
          

Compatible(兼容)

• 此属性为文档兼容模式声明,表示如果在IE浏览器下则使用最新的标准渲染当前文档

Viewport(视口)

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

条件注释

• 条件注释的作用是当判断条件满足的时候,就会执行注释中的HTML代码,不满足时会当做注释忽略掉

第三方依赖

• 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:检测输出的设备是网格的还是位图设备。