- A+
所属分类：Web前端
媒体设备类型使用详解：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <!-- 屏幕设备 --> <style media="screen"> h1{ color:red; } </style> <!-- 打印机设备 --> <style media="print"> h1{ color:green; } </style> <!-- 屏幕设备和打印机设备 --> <style media="screen,print"> h1{ font-weight:normal; } </style> </head> <body> <h1>cyy</h1> </body> </html>
使用link标签设置媒体类型：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <!-- 默认media为all，所有设备 --> <link rel="stylesheet" href="css/commob.css" media="all"> <link rel="stylesheet" href="css/screen.css" media="screen"> <link rel="stylesheet" href="css/print.css" media="print"> </head> <body> <h1>cyy</h1> </body> </html>
使用@import简化页面多文件引用：
这是推荐的做法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>cyy</h1> </body> </html>
style.css
@import url(common.css); @import url(screen.css) screen; @import url(print.css) print;
样式表中使用@media局部定义响应查询：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="navbar"> <a href="">cyy</a> <ul> <li>cyy1</li> <li>cyy2</li> <li>cyy3</li> </ul> </div> </body> </html>
相关less
.navbar{ height:60px; width:900px; display:flex; align-items:center; background:#f3f3f3; margin:0 auto; ul{ list-style:none; display:flex; } } @media screen and (max-width:600px){ .navbar{ ul{ display:none; } } }
and条件判断响应式应用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style media="screen and (min-width:768px) and (max-width:1000px)"> h1{ color:red; } </style> <style media="screen and (max-width:768px)"> h1{ color:blue; } </style> </head> <body> <h1>CYY</h1> </body> </html>
逻辑或使用技巧操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <!-- 当设备为横屏展示，或者设备宽度大于768px不论横竖屏时 --> <style media="screen and (orientation:landscape),screen and (min-width:768px)"> h1{ color:red; } </style> </head> <body> <h1>CYY</h1> </body> </html>
not关键词使用注意要点：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> /* 如果满足条件，则不应用该样式 */ @media not screen and (min-width:500px) and (max-width:768px){ h1{ color:red; } } </style> </head> <body> <h1>CYY</h1> </body> </html>
使用only排除低端浏览器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <style> /* 加上only之后，低端浏览器会忽略该句语法 */ @media only screen and (min-width:500px){ h1{ color:red; } } </style> </head> <body> <h1>CYY</h1> </body> </html>
实战案例操作之文件结构：
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="mb-2"> <div class="container"> <div class="navbar"> <a href="" class="logo">CYY</a> <label for="toggle-nav"><i class="fa fa-tasks" aria-hidden="true"></i></label> <input type="checkbox" name="" id="toggle-nav"> <div class="collapse"> <ul class="links"> <li><a href="">系统学习</a></li> <li><a href="">实战课程</a></li> <li><a href="">话题讨论</a></li> <li><a href="">签到打卡</a></li> </ul> <div class="form"> <a href="">登录</a> <a href="" class="form-bg">注册</a> </div> </div> </div> </div> </header> <div class="container"> <div class="row"> <div class="col-6 col-lg-9 col-xs-12"> <div class="card"> <div class="card-header"> <h2>最新更新</h2> </div> <div class="card-body"> <ul class="list-group"> <li> <a href="">cyy开始学习响应式布局</a> <span>2020-11-13</span> </li> <li> <a href="">cyy开始学习响应式布局</a> <span>2020-11-13</span> </li> <li> <a href="">cyy开始学习响应式布局</a> <span>2020-11-13</span> </li> <li> <a href="">cyy开始学习响应式布局</a> <span>2020-11-13</span> </li> <li> <a href="">cyy开始学习响应式布局</a> <span>2020-11-13</span> </li> <li> <a href="">cyy开始学习响应式布局</a> <span>2020-11-13</span> </li> <li> <a href="">cyy开始学习响应式布局</a> <span>2020-11-13</span> </li> <li> <a href="">cyy开始学习响应式布局</a> <span>2020-11-13</span> </li> </ul> </div> <div class="card-footer"> <div class="page"> <a href=""><</a> <a href="">1</a> <a href="">2</a> <a href="" class="current">3</a> <a href="">4</a> <a href="">5</a> <a href="">></a> </div> </div> </div> </div> <div class="col-6 col-lg-3 col-xs-12"> <div class="card"> <div class="card-header"> <h3>社区小帖</h3> </div> <div class="card-body"></div> <div class="card-footer"></div> </div> </div> </div> </div> </body> </html>
引入统一控制的style.css
@import url(common.css); @import url(navbar.css); @import url(card.css); @import url(title.css); @import url(page.css); @import url(margin.css); @import url(list-group.css); @import url(small-x.css) only screen and (max-width:768px); @import url(small.css) only screen and (min-width:768px); @import url(medium.css) only screen and (min-width:960px); @import url(big.css) only screen and (min-width:1200px);
common.less
*{ margin:0; padding:0; } :root{ font-size:15px; } a{ text-decoration:none; } ul{ list-style:none; } .row{ display:grid; grid-template-columns:repeat(12,1fr); } .col-12{ grid-column:span 12; } .col-11{ grid-column:span 11; } .col-10{ grid-column:span 10; } .col-9{ grid-column:span 9; } .col-8{ grid-column:span 8; } .col-7{ grid-column:span 7; } .col-6{ grid-column:span 6; } .col-5{ grid-column:span 5; } .col-4{ grid-column:span 4; } .col-3{ grid-column:span 3; } .col-2{ grid-column:span 2; } .col-1{ grid-column:span 1; } h2{ font-weight:normal; }
导航组件navbar.less
header{ border-bottom:5px solid #009688; box-shadow:0 5px 5px rgba(0,0,0,.2); .navbar{ display:flex; padding:1rem 0; align-items:center; .logo{ color:#009688; margin-right:20px; font-weight:bold; font-size:1.3rem; &+label{ display:none; &+input{ display:none; } } } .collapse{ display:flex; flex-grow:1; .links{ display:flex; // 占满剩余空间 margin-right:auto; li{ margin:0 10px; a{ color:#777; &:hover{ color:#333; font-weight:bold; } } } } .form{ a{ border:1px solid #009688; color:#009688; padding:.3rem 1rem; border-radius:.3rem; &.form-bg{ background:#009688; color:white; } } } } } } @media screen and (max-width:960px){ header{ .navbar{ // flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。 flex-flow:row wrap; .logo{ margin-right:auto; &+label{ display:block; border:1px solid #ddd; padding:.5rem 1rem; color:#555; cursor:pointer; &+input{ display:none; } &+input:checked{ &+.collapse{ display:block; } } } } .collapse{ display:none; flex-flow:column; width:100%; .links{ flex-direction:column; margin-bottom:1.5rem; li{ margin:.5rem 0; } } } } } }
卡片组件card.less
.card{ border:1px solid #ddd; box-shadow:0 0 5px rgba(0,0,0,.1); border-radius:.2rem; .card-header{ padding:.5rem 1rem; border-bottom:1px solid #ddd; } .card-body{ padding:1rem; } .card-footer{ padding:.5rem 1rem; border-top:1px solid #ddd; } }
文本组件title.less
h2 { font-size: 1rem; } h3 { font-size: 0.8rem; } h2, h3, h4 { color: #555; }
分页组件page.less
.page{ display:flex; a{ display:block; padding:.3rem .8rem; border:1px solid #ddd; // 让重叠的两个边框线叠加在一起 margin-left:-1px; color:#555; &:first-child{ border-top-left-radius:.3rem; border-bottom-left-radius:.3rem; } &:last-child{ border-top-right-radius:.3rem; border-bottom-right-radius:.3rem; } &.current{ background:#009688; color:white; border:1px solid #009688; } } }
边距组件margin.less
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; }
列表组件list-group.less
.list-group{ li{ display:flex; justify-content:space-between; padding:.8rem 0; border-bottom:1px solid #ddd; font-size:.9rem; &:last-child{ border-bottom:none; } a{ color:#777; } span{ color:#888; font-size:.6rem; } } }
超小屏适配 small-x.less
body { background: white; } .container { width: 95%; margin: 0 auto; } .col-xs-12 { grid-column: span 12; } .col-xs-11 { grid-column: span 11; } .col-xs-10 { grid-column: span 10; } .col-xs-9 { grid-column: span 9; } .col-xs-8 { grid-column: span 8; } .col-xs-7 { grid-column: span 7; } .col-xs-6 { grid-column: span 6; } .col-xs-5 { grid-column: span 5; } .col-xs-4 { grid-column: span 4; } .col-xs-3 { grid-column: span 3; } .col-xs-2 { grid-column: span 2; } .col-xs-1 { grid-column: span 1; }
小屏适配small.less
body{ background:white; } .container{ width:750px; margin:0 auto; } .col-sm-12{ grid-column:span 12; } .col-sm-11{ grid-column:span 11; } .col-sm-10{ grid-column:span 10; } .col-sm-9{ grid-column:span 9; } .col-sm-8{ grid-column:span 8; } .col-sm-7{ grid-column:span 7; } .col-sm-6{ grid-column:span 6; } .col-sm-5{ grid-column:span 5; } .col-sm-4{ grid-column:span 4; } .col-sm-3{ grid-column:span 3; } .col-sm-2{ grid-column:span 2; } .col-sm-1{ grid-column:span 1; }
中屏适配medium.less
body{ background:white; } .container{ width:950px; margin:0 auto; } .col-md-12{ grid-column:span 12; } .col-md-11{ grid-column:span 11; } .col-md-10{ grid-column:span 10; } .col-md-9{ grid-column:span 9; } .col-md-8{ grid-column:span 8; } .col-md-7{ grid-column:span 7; } .col-md-6{ grid-column:span 6; } .col-md-5{ grid-column:span 5; } .col-md-4{ grid-column:span 4; } .col-md-3{ grid-column:span 3; } .col-md-2{ grid-column:span 2; } .col-md-1{ grid-column:span 1; }
大屏适配big.less
body{ background:transparent; } .container{ width:1180px; margin:0 auto; } .col-lg-12{ grid-column:span 12; } .col-lg-11{ grid-column:span 11; } .col-lg-10{ grid-column:span 10; } .col-lg-9{ grid-column:span 9; } .col-lg-8{ grid-column:span 8; } .col-lg-7{ grid-column:span 7; } .col-lg-6{ grid-column:span 6; } .col-lg-5{ grid-column:span 5; } .col-lg-4{ grid-column:span 4; } .col-lg-3{ grid-column:span 3; } .col-lg-2{ grid-column:span 2; } .col-lg-1{ grid-column:span 1; }
效果图
使用rem单位操作尺寸响应处理
推荐使用自动化构建工具插件。
