CSS3媒体查询实操(min-width和max-width)

矫情吗;* 2023-01-16 09:54 211阅读 0赞
  1. // 窗口小于等于1650px,文字字号16px
  2. @media (max-width: 1650px) {
  3. font-size:16px;
  4. color:#00031a;
  5. padding-right: 5px;
  6. padding-top: 5px;
  7. font-weight: bold;
  8. }
  9. // 窗口大于等于1651px,文字字号30px
  10. @media (min-width: 1651px) {
  11. font-size:30px;
  12. color:#00031a;
  13. padding-right: 10px;
  14. padding-top: 5px;
  15. }
  16. // 窗口小于等于980px,文字字号30px
  17. @media (max-width: 980px) {
  18. font-size:30px;
  19. color:#00031a;
  20. padding-right: 10px;
  21. padding-top: 5px;
  22. }

发表评论

表情:
评论列表 (有 0 条评论,211人围观)

还没有评论,来说两句吧...

相关阅读

    相关 css-媒体查询

    什么是媒体查询 一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成,例如宽度、高度和颜色。媒体查询,添加自css3,允许内容的呈现针对

    相关 CSS3媒体查询

    经验不足的前端人员在头几次面对一大堆兼容性问题时往往手足无措,有时候一个样式的兼容性问题我们不需要去这种写一个能匹配所有设备的CSS样式,而是可以完全针对不同特性的设备编写不同

    相关 CSS媒体查询

    \\\css3媒体查询 css3媒体查询是响应式方案核心 \\\媒体类型 all 所有媒体(默认值) screen 彩色屏幕 print 打印预览