兔源码_免费的Discuz模板|插件|素材|建站资源下载

 找回密码
 立即注册

QQ登录

只需一步,快速开始

返回列表 

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

[复制链接]

欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]

CSS代码样式如下,可分为两种写法
.css {display:block;//css样式}
兔源码站长也将在近期对本站进行改版,改版后将取消原来的手机版,直接让网站实现PC和移动端自适应
本站开发的自适应模板站:https://www.hangnei.cc/
第一种写法:
  1. @media screen and (max-width:1024px) {
  2.     .css{display:none;//css样式}
  3. }
  4. @media screen and (max-width:800px) {
  5.     .css{display:none;//css样式}
  6. }
  7. @media screen and (max-width:768px) {
  8.     .css{display:none;//css样式}
  9. }
  10. @media screen and (max-width:640px) {
  11.     .css{display:none;//css样式}
  12. }
  13. @media screen and (max-width:600px) {
  14.     .css{display:none;//css样式}
  15. }
  16. @media screen and (max-width:540px) {
  17.     .css{display:none;//css样式}
  18. }
  19. @media screen and (max-width:480px) {
  20.     .css{display:none;//css样式}
  21. }
  22. @media screen and (max-width:414px) {
  23.     .css{display:none;//css样式}
  24. }
  25. @media screen and (max-width:411px) {
  26.     .css{display:none;//css样式}
  27. }
  28. @media screen and (max-width:384px) {
  29.     .css{display:none;//css样式}
  30. }
  31. @media screen and (max-width:375px) {
  32.     .css{display:none;//css样式}
  33. }
  34. @media screen and (max-width:360px) {
  35.     .css{display:none;//css样式}
  36. }
  37. @media screen and (max-width:320px) {
  38.     .css{display:none;//css样式}
  39. }
  40. @media screen and (max-width:280px) {
  41.     .css{display:none;//css样式}
  42. }
  43. @media screen and (max-width:240px) {
  44.     .css{display:none;//css样式}
  45. }
复制代码
第二种写法:
  1. @media (max-width:1024px) {
  2.     .css{display:none;//css样式}
  3. }
  4. @media (max-width:800px) {
  5.     .css{display:none;//css样式}
  6. }
  7. @media (max-width:768px) {
  8.     .css{display:none;//css样式}
  9. }
  10. @media (max-width:640px) {
  11.     .css{display:none;//css样式}
  12. }
  13. @media (max-width:600px) {
  14.     .css{display:none;//css样式}
  15. }
  16. @media (max-width:540px) {
  17.     .css{display:none;//css样式}
  18. }
  19. @media (max-width:480px) {
  20.     .css{display:none;//css样式}
  21. }
  22. @media (max-width:414px) {
  23.     .css{display:none;//css样式}
  24. }
  25. @media (max-width:411px) {
  26.     .css{display:none;//css样式}
  27. }
  28. @media (max-width:384px) {
  29.     .css{display:none;//css样式}
  30. }
  31. @media (max-width:375px) {
  32.     .css{display:none;//css样式}
  33. }
  34. @media (max-width:360px) {
  35.     .css{display:none;//css样式}
  36. }
  37. @media (max-width:320px) {
  38.     .css{display:none;//css样式}
  39. }
  40. @media (max-width:280px) {
  41.     .css{display:none;//css样式}
  42. }
  43. @media (max-width:240px) {
  44.     .css{display:none;//css样式}
  45. }
复制代码
特别注意:原生css样式必须写在最前面,然后按照像素大小倒叙排列


版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。



493651246站长邮箱:tuyuanma@qq.com 站长QQ:3197813386

© 2015-2021 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

快速回复 返回顶部 返回列表