2019.4.26 响应式布局

Posted 2021-10-27 lzb1234

目录

• viewport
• 流式布局
  • 正常流式布局
  • 盒模型流式布局
• 媒体查询
  • 正常媒体查询
    • 内部引入媒体查询
    • 外部引入媒体查询
  • 横竖屏检测
• em和rem

@

viewport

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

有代码提示 是真的爽到

流式布局

(不是流石(さすが)布局)你在想啥

正常流式布局

其实就是百分比布局啦

• 算宽度：本身的宽度/父级的宽度
• 算高度：本身的高度/父级的高度
• 定位值：
  • 纵向定位（top、bottom）/定位父级的高度
  • 横向定位（left、right）/定位父级的宽度
• 盒模型
  • 盒模型纵向：纵向值/父级的宽度
  • 盒模型横向：横向值/父级的宽度

盒模型流式布局

就注意 上下的外边距是除以父级的宽度就行

媒体查询

正常媒体查询

内部引入媒体查询

媒体指的是页面宽度

屏幕宽度大于等于980时候
@media only screen and (min-width: 980px) {
    .all{
        width: 400px;
        background-color: #7FFF00;
    }
}

屏幕宽度小于等于600时候
@media only screen and (max-width: 600px) {
    .all{
        width: 400px;
        background-color: #FFFF00;
    }
}

外部引入媒体查询

把媒体查询里面的样式代码 写在css里 link过去就完事了

但是注意link要写在head的最下面

<link rel="stylesheet" type="text/css" href="css/media.css" media="only screen and (max-width:600px)"/>

横竖屏检测

orientation:landscape

landscape 横屏
portrait 竖屏

检测到横屏,背景颜色变成7fff00
@media only screen and (orientation:landscape ) {
    body {
        background-color: #7FFF00;
    }
}

em和rem

rem 不会受到父标签影响 根据浏览器来的字体大小几rem就加几倍

em 受父级影响 根据父级加倍

例:
默认16px字体
父级设了个13px

用rem加2倍 就变成32px
用em加2倍 就变成26px