WordPress极简博客 WordPress极简博客
  • 新鲜事
  • 战疫情
  • UI素材
    • UI素材
    • 电商/节日
    • PPT
      • 节日庆典
      • 工作汇报
      • 商业计划书
    • word
      • 简历竞聘
      • 合同/公文
  • 创客头条
    • 音乐分享
    • 初创文章
    • 极客头条
    • 数码解说
    • 生活趣事
    • 生活日记
  • 全球科技
    • 新浪博客
    • A5资讯
    • 环球网新闻
  • 编程教学
    • Linux安全栏目
      • Linux运维安全汇总
      • DDOS攻击防护
      • XSS攻击防护
      • SQL安全防护
    • Python技术栏目
      • Python基础入门
      • Python基础结构
    • WordPress技术栏目
      • WP主题
      • WordPress技术教程
      • RIPRO主题美化
    • WordPress漏洞发布
    • 技术教程汇总
  • 专题
  • 基友
  • 隐私
  • 云优化
  • 注册
    登录
立即登录
  • 首页
  • 云优化
  • 新疫情
  • 新鲜事
    • 热文
    • 极客
    • 生活
  • 技术篇
    • WP主题
    • 技术教程
    • Python入门
    • Python基础
  • 专题篇
  • 友链君

WordPress主题css适配屏幕尺寸大小自适应教程

夏柔4月 19, 2020

改新模板的时候考虑到单独适配手机端排版美化。只需要在css内写好窗口大小相对应的样式。访问就根据窗口大小自动使用相应的样式。

下边是我写的适配样式,可参考。框架可拿去用,类和样式需根据自身调整。

WordPress主题css适配屏幕尺寸大小自适应教程-WordPress极简博客

教程开始:

/*移动端适配开始 站壳网www.zhankr.net*/




/*手机端适配  常规尺寸*/

@media (max-width:768px) {




.hh_usertop .user_av img {

    float: left;

    width: 50px;

    height: 50px;

    border-radius: 5px;

    margin-top: 15px;

}

.hh_usertop {

    margin-left: 12px;

    height: 120px;

    max-width: 1380px;

}

.hh_ziliao {

    position: relative;

    top: 1px!important;

    text-align: right;

    width: 100%;

text-align: right; 

}

.user_row {

    position: relative!important;

    top: 40px!important;

}

.user_row li { 

    margin-right: 10px!important;

}

.hh_p2 {

    display: block;

    margin: 0;

    color: gray;

    font-weight: 300;

    font-size: 14px!important;

}

}

/*iphone X 适配*/

@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {

.user_row li { 

    margin-right: 55px!important;

}

.hh_ziliao { 

    margin-left: -80px; 

}}

/*iphone 6/7/8 适配*/

@media only screen and (device-width:375px) and (device-height:667px)   {

.user_row li {

    margin-right: 4px!important;

}

.hh_ziliao {

    margin-left: -80px;

}




}

/*iPhone 5/SE适配*/

@media only screen and (device-width:320px) and (device-height:568px)   {

.hh_usertop .user_av img { 

    width: 40px;

    height: 40px; 

}

.hh_usertop {

    margin-left: 1px;

    padding-top: 80px;

    padding-left: 15px;

    height: 160px;

    max-width: 1380px;

}

    .hh_p2 {

    font-size: 0px!important;

    }

    .hh_ziliao #udptips { 

    top: 20px!important; 

    padding: 1px 1px!important; 

    }

    .hh_ziliao .hh_user_vips {

    top: 33px!important;

    padding: 6px 10px!important;

}

.hh_ziliao {  

    margin-left: -20px; 

    width: 100%;

    text-align: right;

}

    .user_row ul li a.active {

     border-bottom: 0px solid #1990fc!important; 

    color: #2700ff!important;

}   

}

/*移动端适配结束*/
0
分享
夏柔 站长
文章 709评论 23
赞赏
夏柔
相关文章
  • 自定义onion域名
  • 宝塔linux面板一键工具箱
  • 7种提高代码阅读能力的方法
  • 保护你的WordPress,修改服务器默认用户名root
  • Python多线程扫描端口
  • ThnBo-一款针对WordPress开发的缩略图美化插件,为广大站长提供缩略图的美化便利
  • WordPress去除index.php的方法
  • WordPress美化-文字渐变特效
  • WordPress美化-抖动图片
  • 使用HBuilderX封装H5
14 5月, 2020
新型冠状病毒知识宣传人人有责PPT模板
夏柔
站长
夏山如碧 - 怀柔天下
709文章
23评论
58144K获赞
版权声明

文章采用创作共用版权 CC BY-NC-ND/2.5/CN 许可协议,与本站观点无关。

如果您认为本文侵犯了您的版权信息,请与我们联系修正或删除。
投诉邮箱wpsite@aliyun.com

栏目推荐
Python基础入门30
WordPress技术教程265
前沿技术情报所7
城市创新——新消费8
最近有哪些不可错过的热文5
程序员的养生之道0
疫情实况
英国变异新冠病毒或致更高死亡率
1月 23, 2021
31省新增确诊107例 本土90例
1月 23, 2021
拜登公布战时抗疫计划
1月 22, 2021
更多
每日快讯
警方调查西藏冒险王网传视频
1月 23, 2021
北京新增3例本土确诊 均在大兴
1月 23, 2021
英国变异新冠病毒或致更高死亡率
1月 23, 2021
云南昭通市盐津县发生4.7级地震
1月 23, 2021
外媒:特朗普弹劾案审讯2月8日开始
1月 23, 2021
31省新增确诊107例 本土90例
1月 23, 2021
美共和党议员提交弹劾拜登条款
1月 22, 2021
江苏镇江一人核酸检测结果可疑
1月 22, 2021
更多
  • 新鲜事
  • 疫情实况
  • UI素材
  • 技术教程
  • 音乐分享
  • 专题
  • 友情
  • 隐私
  • 云优化
Copyright © 2019-2021 WordPress极简博客. Designed by 骚老板. 辽公网安备21010502000474号