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 ...
随机推荐
- termux 开启 sshd
众所周知, termux 上的 sshd 不能通过 IP 连接, 只能使用密钥, 对于使用 PuTTY 的 Windows 用户, 怎么办呢? 由于 PuTTY 支持 telnet, 而 termux ...
- Android文字转语音引擎(TTS)使用
百度网盘下载地址 密码:3si0资源来源:https://blog.csdn.net/Sqq_yj/article/details/82460580?utm_source=blogxgwz4 简单比较 ...
- Nginx不支持Post数据中带有"."
如果提交的数据中带有.,nginx会把数据过滤掉,会导致后台收不到数据.下面是一个错误示例及解决办法
- 十、uboot 代码流程分析---run_main_loop
调用 board_init_r,传入全局 GD 和 SDRAM 中的目的地址 gd->rellocaddr void board_init_r(gd_t *new_gd, ulong dest_ ...
- 隐马尔可夫模型HMM(一)
摘自 1.李航的<统计学习方法> 2.https://www.cnblogs.com/pinard/p/6945257.html 了解HMM模型 1.隐马尔可夫模型的定义 隐马尔可夫模型是 ...
- nginx + iis 使用介绍
1.下载 nginx 2.配置nginx 文件 1)配置该目录下E:\nginx\nginx-1.9.3\conf: #user nobody; worker_processes ; #error_l ...
- influxdb
1.安装Centos# wget https://dl.influxdata.com/influxdb/releases/influxdb-1.1.0.x86_64.rpm# rpm -ivh inf ...
- 时间戳time
时间戳(timestamp)的方式:通常来说,时间戳表示的是从1970年1月1日开始按秒计算的偏移量(time.gmtime(0))此模块中的函数无法处理1970纪元年以前的时间或太遥远的未来(处理极 ...
- 标准盒模型、IE盒模型
结论:IE盒模型是陈旧知识点,除了帮助理解css3 box-sizing: border-box(等分宽度布局)外没什么用. 标准(W3C)模型中:CSS中的宽(width) = 内容 (conten ...
- C语言中用于计算数组长度的函数 “strlen() ”。
de>#include<stdio.h>#include<stdlib.h>#define MAX_LEN 255int my_strlen1(const char* s ...