响应式布局

来源：互联网发布：微信群控软件下载编辑：程序博客网时间：2024/06/04 01:28

1.灵活的图像和媒体。尺寸按百分比定义，根据环境进行缩放
2.灵活的、基于网格的布局。
3.媒体查询。根据媒体特征，对设计进行调整

创建可伸缩图像

1.图像缩放刻意空间：其父元素建立的内容区域
2.width:100%会让图像尽可能填充容器，容器宽度比图像宽，会拉伸
3.图标字体、svg可创建无损缩放的图性
4.也可以用于video、embed、object

max-width:100%;

这里写图片描述

创建弹性布局

对元素设置基于百分数的margin和padding、字体，常用em

.page{max-width:60em;}  //默认字体为14px

//原来.page{width:960px;}main{width:600px;}.sidebar{width:300px;}//优化后.page{max-width:960px;}main{width:62.5%;}.sidebar{width:31.25%;}

这里写图片描述

媒体查询

media query

device-width,device-height——屏幕宽高（物理）
width,height——渲染窗口宽高（实际）
orentation——设备方向
resolution——设备分辨率

外联和内联的两种用法：

<html><head>    <link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px)">//外联样式    <style>//内联样式    @media screen and (min-width:480px){        body{background:blue;}    </style></head></html>

视觉区域的宽度为设备宽度：在纵向模式下该宽度的页面内容会填充整个屏幕。包含这一句，媒体查询才会显示预期效果

<meta name="viewport" content="width=device-scale=1"/>

这里写图片描述

兼容旧版IE

respond.min.js

这里写图片描述

实例

<html><head lang="en">    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1">    <title></title>    <link type="text/css" rel="stylesheet" href="style.css"></head><body>    <div class="header"></div>    <div class="container">        <div class="left"></div>        <div class="main"></div>        <div class="right"></div>    </div>    <div class="footer"></div></body></html>

*{    margin:0;       padding:0;}.header,.container,.footer{    margin:10px auto;}.header{    height:100px;    background:yellow;}.left,.right,.main{    background:blue;}.footer{    height:100px;    background:black;}@media screen and (min-width: 960px){    .header,    .container,    .footer{        width:960px;    }    .left,    .right,    .main{        float:left;        height:500px;    }    .left,    .right{        width:200px;    }    .main{        margin-left:5px;        margin-right:5px;        width:550px;            }    .container{        height:500px;    }   }@media screen and (min-width: 600px) and (max-width: 960px){    .header,    .container,    .footer{        width:600px;    }    .right,    .main{        float:left;        height:400px;    }    .left{        display:none;    }    .right{        width:160px;    }    .main{        margin-left:5px;        width:435px;            }    .container{        height:400px;    }}@media screen and (max-width: 600px){    .header,    .container,    .footer{        width:400px;    }    .left,    .right{        width:400px;    }    .main{        margin-top:10px;        width:400px;        height:200px;    }    .right{        margin-top:10px;    }    .container{        height:420px;    }}

阅读全文

0 0