Bootstrap初级用户谈谈网页在手机上的显示效果优化
Bootstrap
有一段时间了,但是之前做出的网站都只是在电脑端使用,没有注意过手机端的显示效果。这两天自己使用Bootstrap
做了一个简单的Web个人日志系统,想在手机端也使用,桌面端的效果勉勉强强,但是当用手机打开页面时,效果不忍直视。下面是其中一个界面的效果。.png)


问题一:字体非常的小,简直认不出来
Bootstrap
的文档,终于找到了解决方案:<meta name="viewport" content="width=device-width, initial-scale=1">
Bootstrap
中文文档中的原话:
<header>
中加上这句话,手机端看到的字体就会比较合理。看下面的效果图。
问题二来了:上面的<ul>
导航占了太多的空间,影响了核心内容的显示
<div>
<ul class="list-group text-align-center">
<li class="list-group-item"><h3>效率为王</h3></li>
<li class="list-group-item"><a href="timeflow">流水</a></li>
<li class="list-group-item"><a href="summary">总结</a></li>
<li class="list-group-item"><a href="idea">灵感</a></li>
<li class="list-group-item"><a href="thought">感想</a></li>
</ul>
</div>
Bootstrap
原来的CSS
(实际上自己也不是很熟练CSS
)。于是我就想绕开CSS
的细节技术,想到了在超小屏幕下不显示这个导航,转而实现一个简单的超链接列表。<div class="hidden-xs">
<ul class="list-group text-align-center">
<li class="list-group-item"><h3>效率为王</h3></li>
<li class="list-group-item"><a href="timeflow">流水</a></li>
<li class="list-group-item"><a href="summary">总结</a></li>
<li class="list-group-item"><a href="idea">灵感</a></li>
<li class="list-group-item"><a href="thought">感想</a></li>
</ul>
</div>
<div class="hidden-sm hidden-md hidden-lg hidden-print">
<h3>效率为王</h3>
<a href="timeflow">流水</a>
<a href="summary">总结</a>
<a href="idea">灵感</a>
<a href="thought">感想</a>
<hr/>
</div>
<div>
上应用了.hidden-xs
样式,意思是超小屏幕下不显示该<div>
。然后我又写了一个简单的<div>
,包含4个导航链接,而这个<div>
则应用了.hidden-sm
.hidden-md
.hidden-lg
.hidden-print
样式,表示只在超小屏幕下显示。.hidden-?
样式,可以在Bootstrap
中文文档中看到这样一段画:

问题三又来了:两个箭头按钮和日期没有在一行上,而空间上明明够显示在一行
.col-sm-4
来为三个元素分配空间,当我把设置改为.col-xs-4
时,一切都好了。
col-?-?
可以在Bootstrap
中文文档中找到相关说明:
总结
Bootstrap v3
本来就是一个移动为先的框架,可是我在使用的时候却丢弃了它的精髓,当作了一个简单的排版工具和组件皮肤使用。Bootstrap
的一开始就应该考虑手机端的显示效果,使用col-xs-?
col-sm-?
来为元素分配空间,最简单的情况就是只设置col-xs-?
,因为更大的屏幕规则如果没有设置的画会继承小屏幕规格的设置。<meta name="viewport" content="width=device-width, initial-scale=1">
。Bootstrap初级用户谈谈网页在手机上的显示效果优化的更多相关文章
- 什么是Viewport Meta(width详解)及在手机上的应用
viewport是专为手机浏览器设计的一个meta标签: 有些屏幕很小有智能手机,但分辩率却可以做得很大,比如小米4的默认分辨率为:1920*1080,比许多电脑桌面的都还大,传统桌面网站直接放到手机 ...
- bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现
bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...
- fontforge制作自定义字体及在手机上应用举例——张鑫旭
一.看似无关紧要的事件背景 之所以花时间折腾fontforge这个软件,去制作什么自定义的字体是有原因滴. 之前提过,最近我抽空将公司的手机软件HTML5网页化.期间碰到这么一个问题,页面低栏上的电话 ...
- h5 audio标签在手机上不能自动播放????
最近在做一个微信端的项目,快到接近尾声的时候,发现还没放入音频,于是乎,放入音频,在电脑端测试一切正常,无阻碍. 后来在手机上测试,发现背景音乐不能播放,于是开始找错,刚开始以为是IIS服务器出错,结 ...
- fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别
之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms ...
- 微信小程序客服消息开发实战:实时在手机上接收小程序客服消息通知,以及在手机上回复
在微信小程序开发中,可以非常方便的集成客服功能,只需要一行代码便可以将用户引导至客服会话界面.这行代码就是: <button open-type="contact" bind ...
- Ionic生成的App安装在手机上后无法联网的解决方案
在Ionic中使用inappbrowser.themeablebrowser 组件打开网页,刚开始是好的,后来不知添加什么插件,导致了安装在手机上以后没有网络访问权限. 尝试了很多,最后才发现,此时, ...
- canvas绘图在手机上边缘粗糙
辛辛苦苦用canvas绘图,做好动画后,想看看效果,结果在手机上一打开,效果是有了,但是边缘特别粗糙,这怎么可以呢,有一种说法是你用canvas绘图时候在手机retain屏幕上,他把一个像素分为两个像 ...
- vue.js学习之 如何在手机上查看vue-cli构建的项目
vue.js学习之 如何在手机上查看vue-cli构建的项目 一:找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目 二:输入ip和端口号打开项目 ...
随机推荐
- 【hdu2815-Mod Tree】高次同余方程-拓展BadyStepGaintStep
http://acm.hdu.edu.cn/showproblem.php?pid=2815 题意:裸题... 关于拓展BSGS的详细解释我写了一篇博文:http://www.cnblogs.com/ ...
- Java-马士兵设计模式学习笔记-观察者模式-OOD 封装event
把小孩醒来时的具体情况封装成事件类 Test.java class WakenUpEvent{ private long time; private String location; private ...
- ps小技巧
一.加色与减色 电脑显示器和电视是加色法最常见的形式,而在油漆.颜料和彩色滤光片会用减色. 二.怎么把背景变成透明:其实就是抠图. 1.魔术棒+delete,缺点:应用于边界明显的图片,否则容差不好控 ...
- Java:正则表达式的详解
正则表达式:符合一定规则的表达式. 作用:用于专门操作字符串. 特点:用一些特定的符号来表示一些代码的操作.这样就简化书写.所以学习正则表达式就是学习一些特殊符号的使用. 好处:可以简化对字符串的操作 ...
- 借助adb与gdb确认app内存缓存中是否存在用户敏感数据
一.环境准备 1. 搭建adb调试桥 可参考文章<ADB调试桥安装(方式二)> 2. 安装调试gdb工具 可参考文章<移动设备中导入gdb调试工具> 二.测试执行 root@G ...
- SSIS ->> Control Flow And Data Flow
In the Control Flow, the task is the smallest unit of work, and a task requires completion (success, ...
- 【算法题】- 求和等于K子数组
一整数(有正有负)数组,用尽量少的时间计算数组中和为某个整数的所有子数组 public class SumK { public static void main(String[] args) { in ...
- URAL 1233 Amusing Numbers 好题
参照了nocow上的解法,照搬过来…… 易知一个数X在数列中在另一个数Y前,当且仅当X前缀小于Y或前缀相等X短,那么我们分布考虑,比如对于数48561: 5位上:10000~48560; 4位上:10 ...
- Activity 跳转动画 全局定义
定义application 的 theme <application android:allowBackup="true" android:icon="@drawa ...
- Getting Started Synchronizing Files
https://msdn.microsoft.com/en-US/library/bb902813(v=sql.110).aspx Sync Framework includes a file syn ...