响应式网站-- css媒体查询字体大小

最新推荐文章于 2026-04-29 16:04:45 发布

原创最新推荐文章于 2026-04-29 16:04:45 发布 · 6.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种响应式设计中根据不同屏幕尺寸调整字体大小的方法，通过使用CSS媒体查询实现不同分辨率下的字体显示效果。


@media (min-width: 768px) {
    .category a{
        font-size: 3.6rem;//36px 在bootstrap框架下
    }
}
@media (min-width: 640px) and (max-width: 767px) {
    .category a{
        font-size: 2.5rem;//25px 在bootstrap框架下
    }
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wzxgoogle

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

css零到一高级教程029：CSS 媒体查询 - 实例

kerryqpw的博客

04-01

690

参与评论您还未登录，请先登录后发表或查看评论

CSS----媒体查询设置根节点字体大小

weixin_34313182的博客

03-29

1749

<html> <head> <title>CSS----媒体查询设置根节点字体大小</title> <meta name="keyword" content="CSS----媒体查询设置根节点字体大小"> <meta name='discription' content="CSS----...

响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）

weixin_33968104的博客

06-20

1995

简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 px和视口 媒体查询 百分比自适应场景下的rem解决方案通过vw/vh来实现自适应一、px和视口在静态网页中，我们经常用像...

PyCaret自动化特征工程实战：提升机器学习效率

最新发布

weixin_30546189的博客

04-29

506

特征工程是机器学习中的关键环节，直接影响模型性能与开发效率。通过自动化工具如PyCaret，可以显著减少人工干预，提升特征生成与选择的智能化水平。PyCaret利用特征交互、比率生成等技术，结合方差膨胀因子(VIF)检测，实现高效特征优化。在金融风控、电商分析等场景中，这种自动化方法不仅能提高模型AUC等核心指标，还能大幅缩短迭代周期。本文通过实战案例，展示如何利用PyCaret 3.0的自动化特征工程功能，包括时间序列处理和文本特征生成，帮助数据科学家快速构建高性能模型。

媒体查询字体大小自适应知识点

weixin_46564011的博客

01-02

968

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.

rem使用 媒体查询

m0_63285774的博客

12-03

420

rem基础：rem是一个相对单位，rem的基准是相对于html元素的字体大小。rem可以通过修改html里面的文字大小来改变页面中元素的大小。此时div的宽高就是150px，如果想要改变div的大小可以直接改变html中的文字大小。使用rem单位后可以使一些不能自适应的元素，，达到当设备发生改变的时候等比例的适配当前的设备。 媒体查询可以根据不同的屏幕尺寸改变屏幕的样式。语法: 当屏幕的宽度小于等于800时屏幕的颜色为pink色，当屏幕的宽度小于等于500时屏幕的颜色为紫色。and将多个..

css之媒体查询

weixin_43465508的博客

04-03

9158

因为移动端的尺寸不同,但是，在移动端屏幕上显示的元素的大小是相同的元素的尺寸大小，要根据屏幕尺寸的大小发生变化媒体类型（media types）描述设备的一般类别媒体特性描述了 user-agent输出设备或是浏览器环境的具体特征。

移动端网页meta设置和响应式

weixin_33806300的博客

06-27

704

苏宁易购WAP的meta分析 响应式 　　meta设置　　　　　　　　媒体查询时读的width为viewport的宽度。viewport宽度为手机分辨率。比如note2 1280*720.需要重置为设备 640*360 方式类型 css javascript 原理 媒体查询宽、高范围。设置html的font-size...

编写响应式网站的几点要素

06-29

1780

编写响应式网站的几点要素(1) 在HEAD标签中声明viewport元标签 <meta name="viewport" content="width=device-width,init-scale=1,user-scalable=0" />(2) 不使用绝对的宽度,元素的宽度使用百分比 margin,padding 影响不大(3) 字体,要使用倍率, em e.g ...

CSS3媒体查询 - 页面自适应

yangke_2008_good的专栏

04-30

507

@media only screen and (max-width:1600px) { /* self style */ } @media screen and (max-width: 1440px) { /* self style */ } @media screen and (max-width: 1200px) { /* self style */ } htm...

随手记录的响应式屏幕宽度的CSS代码

dhwmfzh624156的博客

06-26

163

/*响应式*/ @media screen and (max-width:1000px){ div#topNav,div#top,div#navSub,div.mod2,div#bottom p{display:none;} div#nav{width:auto; display:block;} div#bottom p.ps3{display:block;} div.mo...

根据屏幕宽度调整字体大小css

ingenuou_的博客

08-11

1345

根据屏幕宽度调整字体大小css

响应式排版：使用相对单位提升网站可用性

weixin_35972981的博客

05-17

476

本章讨论了在网页设计中使用相对字体大小（em和rem单位）的重要性。通过em单位可以基于父元素的字体大小进行缩放，而rem单位则总是基于根元素<html>的字体大小。这使得排版能够适应用户的浏览器设置，特别是那些需要增大默认字体大小以改善可读性的用户，从而提升网站的可用性和包容性。

计算机常用屏幕分辨率,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...

weixin_31470259的博客

07-27

4167

移动端css公共样式

shengsaihong的博客

04-29

1079

html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 428p...

php样式中的媒体查询,CSS用@media媒体查询进行响应式设计，什么是媒体查询

weixin_42515340的博客

03-12

227

随着互联网的发展，各种智能手机，平板这些移动设备随处可见。那如何让我们的网站在各种移动端设备上都能合理布局呢？为每一个设备写一套代码麻烦且工作量大。那么聪明的程序员们会用一套代码，就能让网站在不同大小的设备上合理显示。因此，响应式设计模型就产生了，其核心就是“媒体查询”。一、什么是媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向：横向或纵向)为其设定CSS样式，媒体...

CSS——什么是响应式网页？如何实现一个响应式网页

chengzhangdewo的博客

09-10

1145

响应式网页是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式布局是让所有的人能在这些设备上让网站运行正常。 媒体查询 CSS3中的增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表使用@Media查询，可以针对不同的媒体类型定义不同的样式，如： @media screen and (max-width: 1920px) { ... } 当视口在375px - 600px之间，设置特定字...

ccs媒体查询

weixin_57770064的博客

07-15

297

使用媒体查询，你可以针对不同的媒体类型定义不同的样式。 媒体查询可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面语法： @media not|only mediatype(媒体类型) and (expressions 媒体功能) { CSS 代码...; } 参数： not：是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。 only: 用来指定某种特别的媒体类型。...

html移动css里的字体,HTML / CSS：移动设备中的表字体大小不同

weixin_29031057的博客

07-03

135

我想有一个简单的网站,可以在桌面和移动浏览器上工作,并遇到一个奇怪的(菜鸟)问题：当我有一个表的列文本长度不同时,移动设备中呈现的字体大小是显着不同的.知道为什么会这样,以及什么是快速和干净的解决方案？在此先感谢您的帮助！body {font-family: Verdana,Geneva,Arial,sans-serif;font-size: medium;}table,td {border: 1...

Web响应式布局（RWD）

Arno047的博客

03-20

650

一、允许网页宽度自动调整二、不使用绝对宽度，使用百分比或width:auto 三、使用相对大小字体 em、rem 四、使用流动布局float 五、核心：使用CSS3 Media Query(媒体查询) 对不支持Media Query的浏览器，先调用：语法：@media 设备名 and /only / not （选取

响应式网站-- css媒体查询 字体大小

响应式网站-- css媒体查询字体大小