【原创】制作CSS自适应网站，常用像素大全-Discuz教程下载

登录/ 注册
站长工具
搜索
返回列表 发新帖

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

来自版块: Discuz教程发表于: 2022-1-14 11:38:40
7002
0
如本资源下载地址失效,请点击此处进行反馈
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网页自适应方法

原创，制作，S自适应，网站，常用，像素，大全

举报

全部评论 0

期待你的评论哦~

教程 / CSS+DIV素材

  • Discuz教程
  • CSS+DIV素材

所属版块

返回版块

您需要登录后才可以回帖 立即登录
登录

©2015-2022 tuyuanma.com 版权所有 Sitemap.xml

本站内容皆来自网络分享，如有侵权请联系我们处理。

赣公网安备36112102000036号 赣ICP备17001544号-10

联系邮箱：tuyuanma@qq.com 联系QQ：3197813386

返回顶部