【原创】制作CSS自适应网站,常用像素大全

来自版块 Discuz教程
1901
0
温馨提示:如下载链接失效,请前往 问题反馈专用帖 进行反馈! 兔源码交流群:493651246
CSS代码样式如下,可分为两种写法
.css {display:block;//css样式}
兔源码站长也将在近期对本站进行改版,改版后将取消原来的手机版,直接让网站实现PC和移动端自适应
本站开发的自适应模板站:https://www.hangnei.cc/
第一种写法:
  1. @media screen and (max-width:834px) {
  2.     .css{display:none;//css样式}
  3. }
  4. @media screen and (max-width:820px) {
  5.     .css{display:none;//css样式}
  6. }
  7. @media screen and (max-width:810px) {
  8.     .css{display:none;//css样式}
  9. }
  10. @media screen and (max-width:800px) {
  11.     .css{display:none;//css样式}
  12. }
  13. @media screen and (max-width:768px) {
  14.     .css{display:none;//css样式}
  15. }
  16. @media screen and (max-width:712px) {
  17.     .css{display:none;//css样式}
  18. }
  19. @media screen and (max-width:640px) {
  20.     .css{display:none;//css样式}
  21. }
  22. @media screen and (max-width:600px) {
  23.     .css{display:none;//css样式}
  24. }
  25. @media screen and (max-width:540px) {
  26.     .css{display:none;//css样式}
  27. }
  28. @media screen and (max-width:480px) {
  29.     .css{display:none;//css样式}
  30. }
  31. @media screen and (max-width:414px) {
  32.     .css{display:none;//css样式}
  33. }
  34. @media screen and (max-width:412px) {
  35.     .css{display:none;//css样式}
  36. }
  37. @media screen and (max-width:411px) {
  38.     .css{display:none;//css样式}
  39. }
  40. @media screen and (max-width:400px) {
  41.     .css{display:none;//css样式}
  42. }
  43. @media screen and (max-width:393px) {
  44.     .css{display:none;//css样式}
  45. }
  46. @media screen and (max-width:390px) {
  47.     .css{display:none;//css样式}
  48. }
  49. @media screen and (max-width:384px) {
  50.     .css{display:none;//css样式}
  51. }
  52. @media screen and (max-width:375px) {
  53.     .css{display:none;//css样式}
  54. }
  55. @media screen and (max-width:360px) {
  56.     .css{display:none;//css样式}
  57. }
  58. @media screen and (max-width:353px) {
  59.     .css{display:none;//css样式}
  60. }
  61. @media screen and (max-width:320px) {
  62.     .css{display:none;//css样式}
  63. }
  64. @media screen and (max-width:280px) {
  65.     .css{display:none;//css样式}
  66. }
  67. @media screen and (max-width:240px) {
  68.     .css{display:none;//css样式}
  69. }
复制代码
第二种写法:
  1. @media (max-width:834px) {
  2.     .css{display:none;//css样式}
  3. }
  4. @media (max-width:820px) {
  5.     .css{display:none;//css样式}
  6. }
  7. @media (max-width:810px) {
  8.     .css{display:none;//css样式}
  9. }
  10. @media (max-width:800px) {
  11.     .css{display:none;//css样式}
  12. }
  13. @media (max-width:768px) {
  14.     .css{display:none;//css样式}
  15. }
  16. @media (max-width:712px) {
  17.     .css{display:none;//css样式}
  18. }
  19. @media (max-width:640px) {
  20.     .css{display:none;//css样式}
  21. }
  22. @media (max-width:600px) {
  23.     .css{display:none;//css样式}
  24. }
  25. @media (max-width:540px) {
  26.     .css{display:none;//css样式}
  27. }
  28. @media (max-width:480px) {
  29.     .css{display:none;//css样式}
  30. }
  31. @media (max-width:414px) {
  32.     .css{display:none;//css样式}
  33. }
  34. @media (max-width:412px) {
  35.     .css{display:none;//css样式}
  36. }
  37. @media (max-width:411px) {
  38.     .css{display:none;//css样式}
  39. }
  40. @media (max-width:400px) {
  41.     .css{display:none;//css样式}
  42. }
  43. @media (max-width:393px) {
  44.     .css{display:none;//css样式}
  45. }
  46. @media (max-width:390px) {
  47.     .css{display:none;//css样式}
  48. }
  49. @media (max-width:384px) {
  50.     .css{display:none;//css样式}
  51. }
  52. @media (max-width:375px) {
  53.     .css{display:none;//css样式}
  54. }
  55. @media (max-width:360px) {
  56.     .css{display:none;//css样式}
  57. }
  58. @media (max-width:353px) {
  59.     .css{display:none;//css样式}
  60. }
  61. @media (max-width:320px) {
  62.     .css{display:none;//css样式}
  63. }
  64. @media (max-width:280px) {
  65.     .css{display:none;//css样式}
  66. }
  67. @media (max-width:240px) {
  68.     .css{display:none;//css样式}
  69. }
复制代码
特别注意:原生css样式必须写在最前面,然后按照像素大小倒叙排列

相关教程:
【实测】DZ论坛首页用手机访问怎么才能自适应显示PC端的首页
【实测】把Discuz网站或论坛改成自适应网页的方法,无需开启手机版及安装手机模板
Discuz! X3.4网页自适应方法


全部评论 0

您需要登录后才可以回帖 立即登录
输入你要评论的内容......
0
0
0
返回顶部