css响应式布局

响应式布局

布局会根据屏幕宽度进行调整1.应用在pc端当检测到用户的屏幕分辨率较小，比如小于1280px，内容区域为990px；当用户屏幕分辨率较大，比如大于1420px，内容区域为1109px；这个变化不需要程序员调整，程序自动使用2.应用在移动设备中（mobile）手机端网页会使用终端设备，并且占满整个屏幕手机的像素及宽度大不相同iphone华为小米方案1，2结合的大型电商及体量较大的网站会使用（京东，淘宝，腾讯视频）3.既可以在pc中打开也可以在移动设备中打开（一般newbalance中国/特斯拉会采用这种方案）如果在pc中打开，一行放6列    如果在pad中打开，一行放4列如果在phone中打开，一行放2列语法：    1.在link中使用媒体查询<link rel="stylesheet" href="./css/1-style-990.css" media="(max-width:1300px)" >        <link rel="stylesheet" href="./css/1-style-1190.css" media="(min-width:1300px) and ((max-width:1600px))">        <link rel="stylesheet" href="./css/1-style-1480.css" media="(min-width:1600px)">    2.通过@media来进行设置@media screen and (max-width: 1300px) {              .wrapper {                   width: 990px;              }              /*可以添加任意的响应式代码*/        }        @media screen and (min-width: 1300px) and (max-width: 1600px) {              .wrapper {                   width: 1190px;             }        }            @media screen and (min-width: 1600px) {              .wrapper {                 width: 1480px;              }        }

响应式布局框架

bootstrap