媒体查询表格样式

媒体查询

查询当前屏幕的宽度变化

  • 针对 PC 不通的分辨率设置屏幕查询
  1. <body>
  2. <button class="btn small">按钮1</button>
  3. <button class="btn middle">按钮2</button>
  4. <button class="btn large">按钮3</button>
  5. <style>
  6. html {
  7. font-size: 10px;
  8. }
  9. .btn {
  10. border: none;
  11. background: slateblue;
  12. color: #fff;
  13. outline: none;
  14. border-radius: 3px;
  15. }
  16. .btn:hover {
  17. cursor: pointer;
  18. opacity: 0.8;
  19. transform: scale(1.05, 1.1);
  20. transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  21. padding: 0.4rem 0.8rem;
  22. }
  23. .btn.small {
  24. font-size: 1.2rem;
  25. }
  26. .btn.middle {
  27. font-size: 1.6rem;
  28. }
  29. .btn.large {
  30. font-size: 1.8rem;
  31. }
  32. @media (max-width: 1024px) {
  33. html {
  34. font-size: 12px;
  35. }
  36. }
  37. @media (min-width: 1025px) and (max-width: 1440px) {
  38. html {
  39. font-size: 14px;
  40. }
  41. }
  42. @media (min-width: 1441px) and (max-width: 1920px) {
  43. html {
  44. font-size: 16px;
  45. }
  46. }
  47. @media (min-width: 1921px) {
  48. html {
  49. font-size: 18px;
  50. }
  51. }
  52. </style>
  53. </body>
  • 根据市面上的 PC 屏 分为 1024,1440,1920 查询屏幕宽度
  1. @media (max-width: 1024px) { html { font-size: 12px; }
    小于 1024(包括 1024)的屏幕 html 的 font-size 设为 12px;
  2. @media (min-width: 1025px) and (max-width: 1440px) { html { font-size: 14px; } }
    1024 到 1440 的屏幕 html 的 font-size 设为 14px;
  3. @media (min-width: 1441px) and (max-width: 1920px) { html { font-size: 16px; } }
    1441 到 1920 的屏幕 html 的 font-size 设为 16px;
  4. @media (min-width: 1921px) { html { font-size: 18px; } }
    大于 1921 的屏幕 html 的 font-size 设为 18px;

更多相关文章

  1. Android获取屏幕分辨率及DisplayMetrics简介
  2. Android教程之MediaStore
  3. 浅谈mysql的子查询联合与in的效率
  4. mysql in语句子查询效率慢的优化技巧示例
  5. mysql oracle和sqlserver分页查询实例解析
  6. 详解 Mysql查询结果顺序按 in() 中ID 的顺序排列
  7. MySQL数据库同时查询更新同一张表的方法
  8. MySQL慢查询日志的配置与使用教程
  9. Mysql升级到5.7后遇到的group by查询问题解决

随机推荐

  1. 查询表中的某一行,表中没有行号相关的属性
  2. 在VS下用C语言连接SQLServer2008
  3. 基于GUI和SQL的剧院票务管理系统
  4. mysql5.6和5.7的权限密码设置
  5. JOIN vs. WHERE:为什么获得相同结果的两
  6. hibernate连接mysql,不能自动建表和添加数
  7. 数据库实践二:高级sql语句
  8. 利用LVS+Keepalived实现MySQL高可用1
  9. 简单统计报表例子(存储过程)
  10. 关于mysql jsp字符编码的问题解决