前言
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
media的使用通常是为了适配移动端和pc端浏览器。
1 检测视口宽度
视口简单理解就是可视区域大小我们称之为视口。
在PC端,视口大小就是浏览器窗口可视区域的大小(窗口多大,可视区域/视口就多大)。
在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980 。
检测视口大小的源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>检测视口宽度</title>
<script>
window.onload=function(){
var viewport_width = document.documentElement.clientWidth
document.getElementsByTagName("h1")[0].innerHTML = "您的屏幕宽度为"+viewport_width
}
</script>
</head>
<body>
<h1></h1>
</body>
</html>
2 利用media判断屏幕宽度
效果图(根据窗口宽度变化响应):
css源码:
<style>
/* media就是来判断屏幕的宽度的 */
@media(max-width:1920px){
body{
background:blue
}
}
@media(max-width:980px){
body{
background-color: blueviolet;
}
}
@media(max-width:720px){
body{
background-color: yellow;
}
}
@media(max-width:520px){
body{
background-color: rgb(0, 255, 98);
}
}
</style>
3 media判断手机是否横放
orientation: portrait(竖屏,即设备中的页面可见区域高度>=宽度)
orientation: landscape(横屏,即设备中的页面可见区域高度<=宽度)
css源码:
<style>
/*如果检测到是横屏的样式就会屏幕变黑*/
@media (orientation: landscape) {
body {
background-color: #ccc;
}
}
/*如果检测到是竖屏的样式就会屏幕变灰*/
@media (orientation: portrait) {
body {
background-color: #000;
}
}
</style>
4 media适配屏幕
media通过对不同屏幕的大小 进行适配根单位大小,保持等比例。这样转换不同移动端查看网页的时候才不会导致写的样式全盘崩溃。
4.1 用css3的写法
无论是js写法还是css3写法,都是要以rem为单位。
rem是相对单位,相对于根(html)元素单位。
<style>
/* 相对单位 */
/* iphone4/5e */
@media screen and (min-width:320px) {
html{
font-size:42.67px;
}
}
/* galasy5e 360 */
@media screen and (min-width:360px) {
html{
font-size:48px;
}
}
/* iphone6/7/8适配 */
@media screen and (min-width:375px) {
html{
font-size:50px;
}
}
/* iphone6/7/8 plus适配 */
@media screen and (min-width:414px) {
html{
font-size:55.2px;
}
}
@media screen and (min-width:750px) {
html{
font-size:100px;
}
}
@media screen and (min-width:760px) {
html{
font-size:100px;
}
}
@media screen and (min-width:1920px) {
html{
font-size:100px;
}
}
#app{
width:7.5rem;
margin:0 auto;
}
header{
width:7.5rem;
height:1.5rem;
background:red
}
</style>
这样写法的缺点就是要对每一个屏幕进行判断,需要不断更新,但可以用js的方法进行统一自判断适配。
4.2 js的方法
(function(doc,win){
// 网易方案
var docEl = doc.documentElement, //html
isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //通过bom对象中的userAgent判断手机是否是ios
dpr = isIOS? Math.min(win.devicePixelRatio,3):1 //dpr 1 2 3 安卓手机一般是1比2
scale = 1/dpr,//dpr是缩放比例
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
docEl.dataset.dpr =dpr
//我们主动去创建一个meta 主动创建一个视口标签
var metaEl = doc.createElement("meta")
metaEl.name="viewport"
metaEl.content = 'initial-scale='+scale +',maximum-scale='+scale+',minimum-scale='+scale
docEl.firstElementChild.appendChild(metaEl)
//适配
var recalc=function(){
//得到视口
var width = docEl.clientWidth //800 900 320 375
if(width/dpr > 750){
width = 750 * dpr
}
docEl.style.fontSize = 100 * (clientWidth/750)+"px"
}
recalc()
win.addEventListener(resizeEvt,recalc,false)
//兼容的写法
doc.addEventListener("DOMContentLoaded",recalc,false)
})(document,window)
使用的时候可以直接调用。