【原创】制作CSS自适应网站,常用像素大全|Discuz教程下载
登录
/
注册
首页
vip资源
站长导航
站长资讯
Discuz模板
Discuz插件
Discuz教程
CSS+DIV素材
问题反馈
站长工具
Discuz!数据字典
TAG标签
Discuz站长交流群欢迎您的加入:493651246
兔源码站长交流群:493651246 欢迎您的加入!
Discuz站长2000人QQ交流群:493651246
站长工具
TAG标签
Discuz!数据字典
站长之家
[ 登录 / 注册 ]
Discuz站长群邀您加入
草根站长交流群欢迎您
广告招租:3197813386
网站一条龙搭建服务
——网站快速搭建——
——建网站,找我们——
用户名
Email
自动登录
找回密码
密码
登录
立即注册
首页
vip资源
站长导航
站长资讯
Discuz模板
Discuz插件
Discuz教程
CSS+DIV素材
问题反馈
好友
帖子
收藏
道具
勋章
任务
设置
收藏
退出
返回列表
tuyuanma
2022-1-14 11:38:40 ・
Discuz教程
关注
【原创】制作CSS自适应网站,常用像素大全
[ 复制链接 ]
来自
版块
:
Discuz教程
2565
0
温馨提示:
如下载链接失效,请前往
问题反馈专用帖
进行反馈!
兔源码交流群: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网页自适应方法
原创
,
制作
,
S自适应
,
网站
,
常用
,
像素
,
大全
相关文章
【收集】不常用的美化+特殊CSS样式(仅供存档,不对外开放)
【原创】修改Discuz门户编辑器中加粗、斜体、字体颜色、左对齐、居中对齐等多余功能
【原创】删除搜索Discuz关键词加粗加亮,避免相关关键词超链接出现溢出
【原创模板】兔源码二次开发Discuz+电脑端手机端自适应网址导航UTF8GBK双版本模板
【原创模板】兔源码二次开发Discuz+电脑端手机端自适应网址导航UTF8GBK双版本模板
【原创】Discuz网站后台创建DIY模板模块并进行调用的方法
【原创模板】魔改价值268元的站长之家自适应PC+手机+网址导航独家修复版UTF8-无资讯、论坛(www.tuyuanma.com)
【原创模板】魔改价值268元的站长之家自适应PC+手机+网址导航独家修复版UTF8-无资讯、论坛(www.tuyuanma.com)
【实测】解决网站Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure image '<URL>'. This content should also be served over HTTPS.
【原创】分享一款浮窗/弹窗选择功能的DIY+JS+CSS模块(百分百有效)
回复
使用道具
举报
提升卡
置顶卡
沉默卡
变色卡
千斤顶
综合
最新
热度
发表评论
期待你的评论哦~
最佳新人
注册账号后积极发帖的会员,发帖数 ≥ 100
管理/版主
此勋章为兔源码管理或版主专属勋章
土豪装逼
此勋章为兔源码土豪装逼勋章,只要100兔币购买即可
tuyuanma
此人什么也没留下~
关注
文章
2711
积分
9773
GA积分银行Ⅱ V1.2.5 价值500元
阅读 121486
个人免签约VIP购买 v2.3 价值88元
阅读 113086
关于出现“对不起,您安装的不是正版应用,安装程序无法继续执行”的解决办法【附Discuz!X3.4之后版本教程】
阅读 112837
资源分享
最新资源
热门资源
1
【原创】分享一款浮窗/弹窗选择功能的DIY+JS+CSS模块(百分百有
162人阅读
2
关闭先登录前台才能登录后台,解决特殊情况无法进后台
195人阅读
3
Discuz!X3.5使用CDN时,获取用户真实IP
224人阅读
4
Discuz!有很多版块时,后台数据无法提交保存的解决方法,同时适
152人阅读
5
【实测】解决网站Mixed Content: The page at '<URL>
240人阅读
1
网盘伪装成本地附件 V6.6插件免费下载
15599人阅读
2
价值45元的网盘附件免跳转下载 商业版V5.1
71632人阅读
3
[1314]资源下载中心 V4.5.0
17991人阅读
4
[滔博]快捷回复主题 商业版-免费下载
16541人阅读
5
价值199元的动漫视频/二次元2 商业版(GBK+UTF8)双版本
31711人阅读
发布新话题
所属版块
返回版块
高级模式
您需要登录后才可以回帖
立即登录
点击加入站长交流群:493651246
发送
本版积分规则
回帖后跳转到最后一页
输入你要评论的内容......
0
0
0
返回顶部