a[href]:after{
content:"(" attr(href) ")";
}
abbr[title]:after{
content:"(" attr(title) ")";
}
a[href^="#"]:after,a[href^="javascript:;"]:after{
content:"";
}
pre,blockquote{
border: 1px solid #999;
/*只有opera浏览器起作用，避免在元素内部插入分页符*/
page-break-inside:avoid;
}
thead{
display:table-header-group;
}
tr,img{
page-break-inside:avoid;
}
img{
max-width:100%!important;
}
p,h2,h3{
/*元素内部发生分页时，最少保留3行*/
orphans:3;
/*元素内部发生分页时，元素顶部最少保留3行*/
windows:3;
}
h2,h3{
/*避免在元素后面插入一个分页符*/
page-break-after:avoid;
}
}
相对单位
如果媒体查询@media使用的是相对单位，如rem，这里有一个坑需要着重强调一下
一般而言，rem是相对于HTML的字体大小的。但是，由于媒体查询的级别非常高，它并不是HTML的子元素，不是相对于HTML，而是相对于浏览器的，而浏览器的默认字体大小是16px
如果HTML设置字体大小为12px，设置如下媒体查询
media="only screen and (max-width:1rem)"实际上，max-width等于16px，而不是12px
而正是由于媒体查询是相对于浏览器的， 所以使用rem就没有必要，完全可以使用em来替代
media="only screen and (max-width:1em)"好了以上就是小编为大家整理的媒体查询的全部内容啦~希望大家继续支持软件开发网~~~
