CSS:服务器字体 与 响应式布局(用法 + 例子 + 效果)

文章目录

  • 服务器字体
    • 定义 服务器字体
    • 使用
    • 例子
  • 响应式布局
    • 设备类型
    • 设备特性
    • 例子

服务器字体

解决字体不一致而产生的。
首先,在网上把字体下载好。

定义 服务器字体

@font-face{font-family:字体名称;src:url(字体资源路径);
}

使用

在需要使用的选择器里加上
font-family:字体名称;

例子

@font-face {font-family: llp;src: url("123.ttf");
}
.main{font-family: llp;background: pink;
}

在这里插入图片描述

响应式布局

页面根据屏幕窗口大小,显示不同的样式。

@media 设备类型 [and 设备特性]{样式....
}

设备类型

基本上都用的 screen 屏幕

设备特性

主要用的是屏幕的宽度

例子

在这里插入图片描述

.m {border: 1px solid red;
}
.mb{display: flex;flex-wrap: wrap;justify-content:space-between;}
.m:nth-child(1){width:49%;min-height: 400px;
}
.m:nth-child(2){width:49%;min-height: 400px;
}
.m:nth-child(3){width:100%;margin-top: 10px;
}
@media screen and (min-width:1000px){.mb{display: flex;justify-content: center;flex-wrap:nowrap;}.m{width:35%;margin:10px 1%;}
}
@media screen and (max-width:300px){.mb{display: flex;justify-content: space-between;flex-direction: column;}.m:nth-child(1){width:100%;margin: 5px 0;}.m:nth-child(2){width:100%;margin: 5px 0;}.m:nth-child(3){width:100%;margin: 5px 0;}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/65750.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探索数据之美:初步学习 Python 柱状图绘制

文章目录 一 基础柱状图1.1 创建简单柱状图1.2 反转x和y轴1.3 数值标签在右侧1.4 演示结果 二 基础时间线柱状图2.1 创建时间线2.2 时间线主题设置取值表2.3 演示结果 三 GDP动态柱状图绘制3.1 需求分析3.2 数据文件内容3.3 列表排序方法3.4 参考代码3.5 运行结果 一 基础柱状图…

c++ 学习系列 -- 智能指针

一 为什么引入智能指针?解决了什么问题? C 程序设计中使用堆内存是非常频繁的操作,堆内存的申请和释放都由程序员自己管理。但使用普通指针,容易造成内存泄露(忘记释放)、二次释放、程序发生异常时内存泄…

Remote Sensing,2023 | 基于SBL的分布式毫米波相干雷达成像的高效实现

Remote Sensing,2023 | 基于SBL的分布式毫米波相干雷达成像的高效实现 注1:本文系“无线感知论文速递”系列之一,致力于简洁清晰完整地介绍、解读无线感知领域最新的顶会/顶刊论文(包括但不限于 Nature/Science及其子刊; MobiCom, Sigcom, MobiSys, NSDI…

【对于一维信号的匹配】对一个一维(时间)信号y使用自定义基B执行匹配追踪(MP)研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

Tesseract用OpenCV进行文本检测

我没有混日子,只是辛苦的时候没人看到罢了 一、什么是Tesseract Tesseract是一个开源的OCR(Optical Character Recognition)引擎,OCR是一种技术,它可以识别和解析图像中的文本内容,使计算机能够理解并处理…

【LeetCode】617.合并二叉树

题目 给你两棵二叉树: root1 和 root2 。 想象一下,当你将其中一棵覆盖到另一棵之上时,两棵树上的一些节点将会重叠(而另一些不会)。你需要将这两棵树合并成一棵新二叉树。合并的规则是:如果两个节点重叠…

k8s常用资源管理 控制

目录 Pod(容器组):Pod是Kubernetes中最小的部署单元,可以包含一个或多个容器。Pod提供了一种逻辑上的封装,使得容器可以一起共享网络和存储资源 1、创建一个pod 2、pod管理 pod操作 目录 创建Pod会很慢 Pod&…

Baumer工业相机堡盟工业相机如何通过BGAPI SDK设置相机的固定帧率(C++)

Baumer工业相机堡盟工业相机如何通过BGAPI SDK设置相机的固定帧率(C) Baumer工业相机Baumer工业相机的固定帧率功能的技术背景CameraExplorer如何查看相机固定帧率功能在BGAPI SDK里通过函数设置相机固定帧率 Baumer工业相机通过BGAPI SDK设置相机固定帧…

【图像去噪的滤波器】非局部均值滤波器的实现,用于鲁棒的图像去噪研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

【C语言】每日一题(错误的集合)

最近在牛客、力扣上做题,花费海量时间,苦不堪言,有时绞尽脑汁也想不出,痛定思痛,每日记录写的比较困难的题。 错误的集合 题目如上图所示 题主乍看之下觉得很简单,再看例子,不就是一个有序数组…

接口测试之Jmeter+Ant+Jenkins接口自动化测试平台

平台简介 一个完整的接口自动化测试平台需要支持接口的自动执行,自动生成测试报告,以及持续集成。Jmeter支持接口的测试,Ant支持自动构建,而Jenkins支持持续集成,所以三者组合在一起可以构成一个功能完善的接口自动化…

变形金刚在图像识别方面比CNN更好吗?

链接到文 — https://arxiv.org/pdf/2010.11929.pdf 一、说明 如今,在自然语言处理(NLP)任务中,转换器已成为goto架构(例如BERT,GPT-3等)。另一方面,变压器在计算机视觉任务中的使用…