rem基础&媒体查询

rem基础

<style>
    html {
    font-size: 12px;
    }
    div {
    font-size: 12px;
    width: 15rem;
    height: 15rem;
    }


    p {
    /*1.em相对于父元素的字体大小来说的*/
    width: 10em;
    height: 10em;
    /*2.rem相对于html元素字体大小来说的*/
    width: 10rem;
    height: 10rem;
    /*3.rem的优点就是可以通过修改html里面的文字大小来改变页面   中元素的大小可以整体控制*/
    }
<style>

媒体查询

• 使用@media查询，可以针对不同的媒体类型定义不同的样式
• @media可以针对不同屏幕尺寸设置不同样式
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

/*在屏幕上  并且  最大的宽度是  800像素  设置想要的样式*/
/*max-width 小于等于800 */
    @media screen and (max-width: 800px){
        body {
        background-color: pink;
        }
    }

媒体查询一般按照从小到大或从大到小的顺序，但为了使代码更简洁，还是采取从小到大顺序。

/*540~970页面改变*/
@media screen and (min-width: 540px) and(max-width: 960px)              {
    body {
        background-color: green;
    }
}

当屏幕>=640px以上的，让div 一行显示2个
当屏幕<640px 让div一行显示一个
建议：媒体查询最好的方法是从小到大

<style>
...
<style>
<link rel="stylesheet" href="style320.css media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css media="screen and (min-width: 640px)">