Css布局 响应式布局介绍

QcJ胜于蓝|优秀个人博客

1. 概念: 写一套css样式可以同时适配多个终端，是为解决移动互联网诞生的。QcJ胜于蓝|优秀个人博客

2. 作用: 面对不同的分辨率设备灵活性强，能够快捷解决多设备显示适应问题QcJ胜于蓝|优秀个人博客

3. 原理QcJ胜于蓝|优秀个人博客

    媒体查询QcJ胜于蓝|优秀个人博客

     ① 外联式媒体查询语法QcJ胜于蓝|优秀个人博客

 QcJ胜于蓝|优秀个人博客

<link rel="stylesheet" type="text/css" media="screen and (min-width: 960px)" href="red.css"/>

        当屏幕窗口大于等于960px时，引入 red.css 文件

 QcJ胜于蓝|优秀个人博客

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

        当屏幕窗口小于960px时，引入 blue.css 文件

 QcJ胜于蓝|优秀个人博客

    ② 内嵌式媒体查询QcJ胜于蓝|优秀个人博客

    语法:QcJ胜于蓝|优秀个人博客

 QcJ胜于蓝|优秀个人博客

@media screen and (min-width: 640px) and (max-width: 960px){
    body{
        background: red;
    }
}

    当屏幕窗口大于640px并且小于960px时，body背景色为红色

 QcJ胜于蓝|优秀个人博客

 QcJ胜于蓝|优秀个人博客

类型	布局宽度
大屏幕	大于等于1200px
默认	大于等于980px
平板	大于等于768px
手机到平板	小于等于767px
手机	小于等于480px

Tags：

转载：【免责声明】：转载自其他平台或媒体的文章，本站将注明来源及作者，但不对所包含内容的准确性、可靠性或网站性提供任何明示或暗示的保证，仅做参考！如有侵权，请联系本站并提供相关证明，本站将依据著作权人意见删除该文，并不承担任何责任！
如果您认为本文侵犯了您的版权信息，请与我们联系修正或删除。感谢您对胜于蓝个人博客网站平台的认可，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源胜于蓝个人博客”。/web/html/76.html

扫描关注胜于蓝微信|公众号，第一时间获取网站模板更新动态

本文地址：/web/html/76.html

很赞哦！ ()