Bootstrap如何配合字体自适应
Bootstrap框架中,字体不会自适应,及时使用rem都不行,那么就只有使用媒体查询来做。这样可能会有点麻烦,但是这是我目前找到的一个方法直接上代码了
div {
font-size: 12px;
-webkit-transition: font-size 0.2s ease-out;
} @media only screen and (max-width: 1200px) {
div {
font-size: 39px;
} .hb-size {
font-size: 39px;
} .ft-num {
font-size: 38px;
}
.hb-num {
font-size: 37px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 1100px) {
div {
font-size: 38px;
} .hb-size {
font-size: 38px;
} .hb-num {
font-size: 37px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 1000px) {
div {
font-size: 37px;
} .hb-size {
font-size: 37px;
} .hb-num {
font-size: 36px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 900px) {
div {
font-size: 36px;
} .hb-size {
font-size: 36px;
} .hb-num {
font-size: 35px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 800px) {
div {
font-size: 35px;
} .hb-size {
font-size: 35px;
} .hb-num {
font-size: 34px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 700px) {
div {
font-size: 30px;
} .hb-size {
font-size: 30px;
} .hb-num {
font-size: 29px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 600px) {
div {
font-size: 20px;
} .hb-size {
font-size: 22px;
} .hb-num {
font-size: 21px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 500px) {
div {
font-size: 22px;
} .hb-size {
font-size: 17px;
} .hb-num {
font-size: 13px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 400px) {
div {
font-size: 19px;
} .hb-size {
font-size: 15px;
} .hb-num {
font-size: 12px;
}
.hb-info
{
font-size: 12px;
}
} @media only screen and (max-width: 320px) {
div {
font-size: 16px;
} .hb-size {
font-size: 12px;
} .hb-num {
font-size: 12px;
}
.hb-info
{
font-size: 12px;
}
}
Bootstrap如何配合字体自适应的更多相关文章
- Bootstrap<基础十一>字体图标(Glyphicons)
字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形. 获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本 ...
- wpf-MVVM界面自适应:界面自适应及字体自适应
原文:wpf-MVVM界面自适应:界面自适应及字体自适应 1,界面自适应 界面先划分Region,每个填充Region的View不设置Width属性,即可按照Region划分的比例,自适应屏幕分辨率 ...
- vue+element-ui 字体自适应不同屏幕
项目背景:屏幕自适应问题,当在不同分辨率的屏幕上显示页面时,页面的字体需要根据屏幕大小来自适应,想到使用rem作为字体的单位 vue-cli脚手架下的index.html中写入以下js脚本 <s ...
- 2015.4.21 实现一般免登陆,微博QQ分享,字体自适应等
1.实现一般的登录验证和免登陆: 解决方法:node方法代码,nodeJS实现的session模块,不完整,但能用,仅供参考. 语言无所谓,session的机制都是一样的,实现不一样而已,: 2. ...
- 如何让Android字体自适应屏幕分辨率
在不同的分辨率下,Android字体大小怎么自适应分辨率的变化? 假设需要适应320x240,480x320分辨率.在res目录下新建文件夹values-320x240, values-480x320 ...
- bootstrap 固定底部导航自适应
在使用bootstrap 底部导航的时候遇到了一个问题 -- 当我的内容超过一屏的时候,底部的部分内容会被固定的导航内容遮盖 自己写了一个JS脚本,解决自适应的问题 <nav class=&qu ...
- 使用jQuery和Bootstrap实现多层、自适应模态窗口
本篇实践一个多层模态窗口,而且是自适应的. 点击页面上的一个按钮,弹出第一层自适应模态窗口. 在第一层模态窗口内包含一个按钮,点击该按钮弹出第二层模态窗口,弹出的第二层模态窗口会挡住第一层模态窗口,即 ...
- 原生js移动端字体自适应方案
自从进入新公司之后,就一直采用800的方案,也就是判断屏幕尺寸,大于800px是一种html字体处理方案,另一种方案是小于800px的html字体处理方案, 代码如下: (function(doc, ...
- vue-cli 【flexible】屏幕字体自适应布局及配置
0.前言: 很多前端小伙伴在写页面尤其是移动端页面的时候,要求页面布局以及字体大小随屏幕宽度变化而随之按比例自适应[注:非响应式],那么,在vue-cli脚手架中应该如何去实现呢? 1.安装flexi ...
随机推荐
- GNU Screen Usage
分屏: 1.在终端输入screen命令 2.Ctrl+a 然后shift+s 上下分屏,切换到下方Ctrl+a tab然后新建一个window(Ctrl+a c) 3.切换到上方,Ctrl+a tab ...
- IScroll5要防止重复加载
增加一个判断条件,ajax未返回前,设置为true,返回前设置为false,只有为false下才能够出发加载数据事件效果好很多.
- 为什么要用日志框架 Logback 基本使用
[日志框架]以时间为单位描述应用项目运行状态:用户下线.接口超时.数据库崩溃等等一系列事件 [日志框架能力] 1.定制输出格式 2.定制输出目标 3.携带 Context 比如 HelloWorld. ...
- Dapper.net 输出存储过程实例
1.存储过程名: public static class CampaignTrackingDomainSql { /// <summary> /// proc /// </summa ...
- sql插入oracle链接的数据
报错OLE DB 访问接口 "OraOLEDB.Oracle" 返回了消息 "ORA-29275: 部分多字节字符". select addr from tes ...
- c2d遮罩
ClippingNode 节点 ClippingNode setStencil 设置模版 只有模版的区域显示此节点内容 使用了Opengl的 模板测试 http://www.cnblogs.com ...
- jira和svn关联后,不显示Subversion Commits标签或不显示svn提交信息
1.jira的版本是7.3.6 2.不显示Subversion Commits标签或不显示svn提交信息 其实是权限的分配问题 3.管理员登录 找到对应项目的权限管理 4.[评论权限]——[编辑所有评 ...
- MGR 架构 ~ DBA相关运维管理
一 简介:简述DBA相关管理MGR工作 二 监控 1 采用proxysql相关创造的view视图作为监控指标 三 备份 1 利用xtrabackup在读节点进行备份 2 设置binlog保留日期 四 ...
- ASP.NET MVC 入门
ASP.NET MVC 入门 (Learning ASP.NET MVC) 传统的WebForm发展到如今出现不少的缺陷, 比如为了解决Http的无状态WebForm模式使用了ViewsState来保 ...
- MySql cmd下的学习笔记 —— 有关select的操作(in, and, where, like等等)
为方便本节学习, 请先自行建立本表: 建一个商品表: create table goods ( -> goods_id mediumint(8) unsigned not null auto_i ...