移动端
@media (min-width:320px) { html { font-size: 42.6667px; } }
@media (min-width:360px) { html { font-size: 48px; } }
@media (min-width:375px) { html { font-size: 50px; } }
@media (min-width:384px) { html { font-size: 51.2px; } }
@media (min-width:414px) { html { font-size: 55.2px; } }
@media (min-width:448px) { html { font-size: 59.7333px; } }
@media (min-width:480px) { html { font-size: 48px; } }
@media (min-width:512px) { html { font-size: 68.2667px; } }
@media (min-width:544px) { html { font-size: 72.5333px; } }
@media (min-width:576px) { html { font-size: 76.8px; } }
@media (min-width:608px) { html { font-size: 81.0667px; } }
@media (min-width:640px) { html { font-size: 85.3333px; } }
@media (min-width:750px) { html { font-size: 100px; } } * { margin: 0; padding: 0; } .html { /* 移动端ios禁止调整字体 */ text-size-adjust: 100% !important; -webkit-text-size-adjust: 100%!important; /* 抗锯齿 */ -webkit-font-smoothing: antialiased; }
body{ display: flex; flex-direction: column; justify-content: center; align-items: center; } /* 低像素文本抗锯齿处理 */
.font_smoothing_n { -webkit-font-smoothing: none; }
/* 列表 */
ul, ol { list-style: none; }
/* 链接 */
a { text-decoration: none; }
/* 按钮 */
button { outline: none; border: none; border-radius: 0; }
input { border: none; outline: none; }
input[type="button"], input[type="submit"], input[type="reset"], textarea { appearance: none; -moz-appearance: none; -webkit-appearance: none; }
/* 图片 */
img { border: none; vertical-align: middle; width: 100%; }
/* flex布局 */
.flex { display: flex; display: -webkit-flex; }
.flex_warp { flex-wrap: wrap; -ms-flex-wrap: wrap; }
.flex_x { flex-flow: column; -ms-flex-flow: column; }
.flex_y { flex-flow: row; -ms-flex-flow: row; }
.flex_sa { justify-content: space-around; }
.flex_sb { justify-content: space-between; }
.flex_fs { justify-content: flex-start; }
/* 定位 */
.position_r { position: relative; }
.position_a { position: absolute; }
.position_f { position: fixed; }
.z_idx_s { z-index: -1; }
.z_idx_m { z-index: 10; }
.z_idx_l { z-index: 100; }
/* 盒模型 */
.box_bb { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
/* 穿透 */
.penetrate { pointer-events: none; }
/* 禁止复制 */
.no_copy { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* 字体 */
.font_b { font-weight: bold; }
.font_n { font-weight: normal; }
pc端
<!-- 响应式开发： 让页面的布局根据屏幕宽度的变化而变化
例如大屏幕(现代电脑) w>1200 一行显示4个div 25%
中等屏幕(老式电脑) 992<w<1200 一行显示3个div 33.33%
小屏幕(平板电脑) 768<w<992 一行显示2个div 50%
超小屏幕(手机) w<768 一行显示1个div 100%-->
@media(max-width: 1200px) {
/*和CSS一样写选择器和属性 和值*/
.col {
width: 33.33%;
}
}
/*如果有多个条件 可以用 and连接*/
@media (max-width: 992px) {
/*和CSS一样写选择器和属性 和值*/
.col {
width: 50%;
}
}
/*如果有多个条件 可以用 and连接*/
@media (max-width: 768px) {
/*和CSS一样写选择器和属性 和值*/
.col {
width: 100%;
}
}
/*如果有多个条件 可以用 and连接*/
@media (min-width: 1200px) {
/*和CSS一样写选择器和属性 和值*/
.col {
width: 25%;
}
}
/* 由于CSS有层叠性 如果都写max-width 小于等于生效的判断 小屏幕的判断 和 大屏幕的判断同时生效
希望小屏幕生效
例如 750宽度 max-width:1200; max-width:992; max-width:768;
大家都成立希望生效 768最小那个 需要把最小768判断写在最后面把前面2个覆盖
*/
/* 写媒体查询条件的时候 如果 使用max-width 小于等于做判断
应该把条件从大到小写 让小屏幕样式把大屏幕样式覆盖 向上覆盖*/
</style>
</head>
<body>
<div class="row">
<div class="col">div1</div>
<div class="col">div2</div>
<div class="col">div3</div>
<div class="col">div4</div>
</div>
</body>
