css3 媒体查询@media only screen and (min-width: 640px) { html { font-size: 32px; background: #

最新推荐文章于 2022-07-28 18:43:40 发布

Ming-code

最新推荐文章于 2022-07-28 18:43:40 发布

阅读量2.5k

点赞数

分类专栏： css HTML

本文链接：https://blog.csdn.net/xiaoming7776/article/details/100037142

版权

css 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

@media only screen and (min-width: 640px) {
  html {
    font-size: 32px;
    background: #8cbc8b; }

  body {
    width: 640px;
    margin: 0 auto; }
  }
@media only screen and (min-width: 620px) and (max-width: 640px) {
  html {
    font-size: 32px; } }
@media only screen and (min-width: 600px) and (max-width: 620px) {
  html {
    font-size: 31px; } }
@media only screen and (min-width: 580px) and (max-width: 600px) {
  html {
    font-size: 30px; } }
@media only screen and (min-width: 560px) and (max-width: 580px) {
  html {
    font-size: 29px; } }
@media only screen and (min-width: 540px) and (max-width: 560px) {
  html {
    font-size: 28px; } }
@media only screen and (min-width: 520px) and (max-width: 540px) {
  html {
    font-size: 27px; } }
@media only screen and (min-width: 500px) and (max-width: 520px) {
  html {
    font-size: 26px; } }
@media only screen and (min-width: 480px) and (max-width: 500px) {
  html {
    font-size: 25px; } }
@media only screen and (min-width: 460px) and (max-width: 480px) {
  html {
    font-size: 24px; } }
@media only screen and (min-width: 440px) and (max-width: 460px) {
  html {
    font-size: 23px; } }
@media only screen and (min-width: 430px) and (max-width: 440px) {
  html {
    font-size: 22px; } }
@media only screen and (min-width: 420px) and (max-width: 430px) {
  html {
    font-size: 21.5px; } }
@media only screen and (min-width: 410px) and (max-width: 420px) {
  html {
    font-size: 21px; } }
@media only screen and (min-width: 400px) and (max-width: 410px) {
  html {
    font-size: 20.5px; } }
@media only screen and (min-width: 380px) and (max-width: 400px) {
  html {
    font-size: 20px; } }
@media only screen and (min-width: 360px) and (max-width: 380px) {
  html {
    font-size: 19px; } }
@media only screen and (min-width: 340px) and (max-width: 360px) {
  html {
    font-size: 18px; } }
@media only screen and (min-width: 320px) and (max-width: 340px) {
  html {
    font-size: 17px; } }
@media only screen and (min-width: 300px) and (max-width: 320px) {
  html {
    font-size: 16px; } }
@media only screen and (max-width: 300px) {
  html {
    font-size: 15px; } }