标签：media 布局 width html rem font 页面

rem基础

rem是一个相对单位，类似于em。em是相对父元素来说的。
如果父元素font-size为10px, 子元素设置2em为20px。
不同的是rem是相对于html根元素字体大小。如html设置字体大小为24px , 设置元素字体为2rem,字体为48px

@media查询

media查询可以针对不同的屏幕尺寸设置不同的样式

media三个参数

@media mediatype and/not/only （media feature）

mediatype 媒体类型
and/not/only 关键字 （and将多个媒体设备连接在一起，有且的意思，not排除某个媒体类型，有非的意思，only指定媒体类型，可以省略）
media feature 媒体特性 必须小括号包含（1.width:输出页面中页面可见区域宽度，2.min-width:输出页面中最小页面可见宽度3.max-width:输出页面中最大页面可见宽度

    @media screen and (max-width: 800px) {
      body {
        background-color: orange;
      }
    }

当最大宽度小于等于800时，body变为橘色

media查询和rem结合

    @media screen and (min-width: 320px) {
      html {
        font-size: 100px;
      }
    }
    @media screen and (min-width: 640px) {
      html {
        font-size: 200px;
      }
    }
    
    @media screen and (min-width: 940px) {
      html {
        font-size: 300px;
      }
    }

从小到大实现屏幕变化实现宽高变化

media查询引用不同的样式文件

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

less使用

less是css的一种处理语言， CSS预处理器

• List item

标签：media,布局,width,html,rem,font,页面
来源： https://blog.csdn.net/yeyeyeyu/article/details/120052005

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。