响应式布局

响应式布局

针对不同屏幕显示不同效果

一、 媒体查询

可以控制在不同屏幕宽度显示的效果

0. 通过@media 关键字定义媒体查询
1. min-width 屏幕最小宽度
2. max-width 屏幕最大宽度
3. 给定范围时通过 and 连接

 
/* 屏幕最小600px */
        @media (min-width:600px) {
            .box {
                width: 400px;
                height: 400px;
                background-color: teal;
​
            }
        }
        /* 屏幕最大在1000px */
        @media (max-width:1100px){
            .box{
                width: 600px;
                height: 600px;
                background-color: turquoise;
            }
        }
        /* 屏幕宽度在600-1000之间 */
        @media (min-width:600px) and  (max-width:1000px){
            .box{
                width: 800px;
                height: 800px;
                background-color: rgb(39, 98, 206);
            }
​
        }
       

引用 css

 <link rel="stylesheet" href="./max600.css" media="(max-width:600px)">
    <link rel="stylesheet" href="./max1200px.css" media="(min-width:600px) and (max-width:1200px)
    ">
    <link rel="stylesheet" href="./max1920.css" media="(min-width:1200px) and (max-width:1920px)">

开发方式

渐进增强，优雅降级

渐进增强：更新新功能，新人物，新玩法等

优雅降级：特殊性企业，为了保证安全等，一直保持低版本

业务挂钩，用户群体

开发采用的方式跟项目类型和所针对的群体有关，不同项目有不同的开发方向

浏览器兼容性

所谓的浏览器兼容性问题，是指：因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。

浏览器内核

浏览器间内核差异会产生兼容性问题

浏览器	排版引擎	js引擎
IE	Trident、EdgeHTML	JScript
Firefox	Gecko	TraceMonkeyo
CHROME	Webkit、Blink	V8
SAFARI	Webkit	SquirrelFish Extreme
OPERA	Presto	Carakan

浏览器的工作模式

浏览器的工作模式常被成为”渲染模式“.

2009年3月19日，微软发布的IE8重新定义了“标准模式”，再次增强了对规范的支持，同时，为了保持对IE7的支持，IE8增加了“准标准模式”，于是IE8就分成了标准模式、准标准模式、混合模式。

CSS Hack有三种实现方式：

0. CSS 类内部的Hack

1. CSS 类选择器的Hack

2. HTML头部的Hack

   • lte：它是less than or equal to 的简写，意思是小于等于。
   • lt：less than ，小于。
   • gte:greater than or equal to
   • gt: greater than 大于。
   • ！：不等于

   厂商前缀

   div{
       /* 火狐 */
       -moz-animation: ;
       /* 欧朋 */
       -o-animation: ;
       /* 微软 */
       -ms-flex: ;
       /* 苹果 */
       -webkit-animation: ;
       /* 谷歌 */
       -webkit-animation: ;
       
   }
   

   \