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

温馨提示：如下载链接失效，请前往问题反馈专用帖进行反馈！兔源码交流群：493651246

CSS代码样式如下，可分为两种写法
.css {display:block;//css样式}
兔源码站长也将在近期对本站进行改版，改版后将取消原来的手机版，直接让网站实现PC和移动端自适应
本站开发的自适应模板站：https://www.hangnei.cc/
第一种写法：

@media screen and (max-width:834px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:820px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:810px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:800px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:768px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:712px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:640px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:600px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:540px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:480px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:414px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:412px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:411px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:400px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:393px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:390px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:384px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:375px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:360px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:353px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:320px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:280px) {
.css｛display:none;//css样式｝
}
@media screen and (max-width:240px) {
.css｛display:none;//css样式｝
}

复制代码

第二种写法：

@media (max-width:834px) {
.css｛display:none;//css样式｝
}
@media (max-width:820px) {
.css｛display:none;//css样式｝
}
@media (max-width:810px) {
.css｛display:none;//css样式｝
}
@media (max-width:800px) {
.css｛display:none;//css样式｝
}
@media (max-width:768px) {
.css｛display:none;//css样式｝
}
@media (max-width:712px) {
.css｛display:none;//css样式｝
}
@media (max-width:640px) {
.css｛display:none;//css样式｝
}
@media (max-width:600px) {
.css｛display:none;//css样式｝
}
@media (max-width:540px) {
.css｛display:none;//css样式｝
}
@media (max-width:480px) {
.css｛display:none;//css样式｝
}
@media (max-width:414px) {
.css｛display:none;//css样式｝
}
@media (max-width:412px) {
.css｛display:none;//css样式｝
}
@media (max-width:411px) {
.css｛display:none;//css样式｝
}
@media (max-width:400px) {
.css｛display:none;//css样式｝
}
@media (max-width:393px) {
.css｛display:none;//css样式｝
}
@media (max-width:390px) {
.css｛display:none;//css样式｝
}
@media (max-width:384px) {
.css｛display:none;//css样式｝
}
@media (max-width:375px) {
.css｛display:none;//css样式｝
}
@media (max-width:360px) {
.css｛display:none;//css样式｝
}
@media (max-width:353px) {
.css｛display:none;//css样式｝
}
@media (max-width:320px) {
.css｛display:none;//css样式｝
}
@media (max-width:280px) {
.css｛display:none;//css样式｝
}
@media (max-width:240px) {
.css｛display:none;//css样式｝
}

复制代码

特别注意：原生css样式必须写在最前面，然后按照像素大小倒叙排列

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

		自动登录	找回密码
密码			立即注册

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

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

相关文章

最佳新人

管理/版主

土豪装逼

资源分享

【原创】分享一款浮窗/弹窗选择功能的DIY+JS+CSS模块（百分百有162人阅读

关闭先登录前台才能登录后台，解决特殊情况无法进后台195人阅读

Discuz!X3.5使用CDN时，获取用户真实IP224人阅读

Discuz!有很多版块时，后台数据无法提交保存的解决方法，同时适152人阅读

【实测】解决网站Mixed Content: The page at '<URL>240人阅读

网盘伪装成本地附件 V6.6插件免费下载15599人阅读

价值45元的网盘附件免跳转下载商业版V5.171632人阅读

[1314]资源下载中心 V4.5.017991人阅读

[滔博]快捷回复主题商业版-免费下载16541人阅读

价值199元的动漫视频/二次元2 商业版(GBK+UTF8)双版本31711人阅读

所属版块