主机排行网重大更新，移动端自适应

2024-05-13 18:16:41

2019独角兽企业重金招聘Python工程师标准>>>

此前有网友反馈，主机排行网在移动端表现太丑了，希望我改改，今天周末，我专门花了两个多小时来好好把移动短整治了一下，比以前好看多了。

对比改变

对比一下吧，下图是前版本的主机排行网：

新版效果：

体验地址：https://hostingranking.cn/

本次修改的过程

我此前也从没真正做过移动端适配的事情，只是初步了解是通过媒体查询来做的，即当浏览器界面满足一定大小时，就会触发该媒体查询器所包含的css。

主机排行网用的css框架是bootstrap4，而bs在自适应方面是沉淀了十多年的，很强悍。我参照官网教程：https://getbootstrap.com/，重新改版了排行页中的两列布局，此前的代码是：

<div class="row"><div class="col-10">// part 1</div><div class="col-2">// part 2</div>
</div>

这样的两列布局代码会让我的界面始终是两列的，因为这里没有其他的col修饰，.col-在屏幕是任何大小时都生效，如果我们想让界面缩小到一定时，两列变一列，那么就不能用.col-来修饰了，我根据我的需求，在界面大于960px才触发两列布局，所有这里要把.col-改为.col-lg-。

这个改动完了，我希望当界面缩小到1000px以下时，主机特征那部分隐藏掉，并且在界面小于720px时隐藏掉详细评价按钮，不然内容太挤，放不小。

此时bs就没有相关的类来帮助你了，需要自己动手写媒体查询：

@media(max-width: 1000px) {.features {display: none;}
}
@media(max-width: 720px) {.btns {:nth-child(2) {display: none;}}
}

总结收获

此前一直不想做移动端的适配，是因为觉得很难，其实有了bs的帮助这个功能真的很好做，凡是多尝试多探索，不要不做就放弃了。

转载于:https://my.oschina.net/u/1402873/blog/3030446

主机排行网重大更新，移动端自适应相关推荐

苹果cmsv10仿韩剧网好看的高端简约免费自适应模板
韩剧网模板主题介绍: 模板名称:苹果cmsv10仿韩剧网好看的高端简约免费自适应模板模板程序:苹果cmsv10 模板类型:自适应空间支持:php5.6+mysql 模板颜色:粉红色模板来源:来自 ...
移动端自适应布局和响应式页面兼容移动端布局
上篇博客讲到了移动端的常用布局模式之一:Flex布局,这篇博客咱们来了解一下移动端的另外两种布局--移动端自适应布局和响应式页面兼容移动端布局. 目录一.移动端自适应布局 1.rem 什么是rem ...
虚拟主机评测网已经崭露头角
随着业界的发展,虚拟主机从最开始的雏形模式慢慢的走向了高端模式.在虚拟主机上,越来越多的功能被挖掘,他将是网络的主流. 目前的国外虚拟主机十分受国内欢迎,尤其是美国虚拟主机越来越引起国内广大站长的 ...
实战：Windows Server 2008 使用WSUS实现内网计算机系统更新
实战:使用WSUS实现内网计算机系统更新实战目标: u 能够在域环境中配置系统更新服务器 u 使用组策略将计算机分成三个组,办公用户的计算机主要安装Windows XP和Vista,将这些计算机指定 ...
js页面自适应屏幕大小_移动端自适应布局方法的calc()与vw
前端人员在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不 ...
html5 自适应手机布局,科技常识：html5移动端自适应布局的实现
今天小编跟大家讲解下有关html5移动端自适应布局的实现 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关html5移动端自适应布局的实现的相关资料,希望小伙伴们看了有所帮助. 场景:为适 ...
PHP钥匙导航源码-社区导航双端自适应Typecho模板
简介: PHP源码-钥匙导航社区导航双端自适应Typecho模板功能介绍: 自动收录,自定义排序,自定义颜色,批量检测广告: txt 里面的内容可以放到usr\themes\flkc\index.P ...
神泣单机服务器维护,神泣9.0网游单机版网单一键服务端魔王归来
002021yzvzgha0abz5yk3b.jpg (96.66 KB, 下载次数: 5) 神泣9.0网游单机版网单一键服务端魔王归来 2020-7-8 08:34 上传 002022gmzvok ...
Frp内网穿透——frps服务端部署
由于现在IPv4地址的短缺,在国内不可能每个设备都会分配到一个公网IP,因此从公网中访问自己的私有设备向来是一件难事儿.本次带大家了解一下frp内网穿透的服务端教学,让你也能够部署一个内网穿透服务. ...

最新文章

热门文章