CSS之基于视窗单位的排版

1.使用视窗单位进行排版

这里还有一个为什么要考虑使用视窗单位进行排版的原因 - 根据客户端的浏览器,视窗单位会自动重新计算。这就意味着我们不需要显式声明媒体查询的字体大小

实例1:让我们用一个例子清楚地说明这一点

考虑下面的代码,我在800px处将font-size的大小由16px 更改为 20px

这里写图片描述

当你看着这段代码时,你可以在800px视窗时,立马告诉font-size将大小由16px更改为20px。这是我们为了良好的视觉效果经常做的事情

但是,偶尔你也会遇到这种情况,在两个断点处你不得不额外增加一个媒体查询以便在不同的设备上,排版依旧保持良好

这里写图片描述

但是不指定多个媒体查询或者多个字体大小,你如何在不同情况下拥有相同效果呢?

这时候视窗单位就要发挥它的作用了,在视窗单位中设置font-size属性,你就可以很容易的获取一样的效果

这里写图片描述

不过,正如你可以看到的,视窗单位太适应屏幕大小的改变。如果你也将字体大小设置为3vw,在一个屏幕宽度为320px的设备(移动)上,你得到的文本大小将为10px。这时字体过小而不适合阅读。另一方面,在一个屏幕宽度为1440px的设备(笔记本电脑)上,你得到的字体大小将为43px,这时,字体又太大了

值得庆幸的是,这里有一个简单的方法可以实现。我们可以设置一个最小的字体大小,然后在一个小视窗中通过多次使用calc()属性缩放字体

这里写图片描述

2.calc的问题

我尝试做的第一件事就是创建一个字体大小为 body 文本大小两倍的<h1>元素。结果证实并不可以直接这么做,请看下面的实例

这里写图片描述

这里写图片描述

比方说你现在的视窗大小为800px。默认的font-size大小为16px

  • <html>中112.5%计算出的font-size大小为18px(112.5/100 * 16px)
  • 0.25vw计算出的值相等于2px(800px * 0.25 ÷ 100)\
  • <html>中计算的font-size大小为20px (18px + 2px)

到目前为止HTML计算是不是很好?太棒了!

我们将采用同样的方式来解决<h1>的计算。这一次要特别注意112.5%的计算

  • <h1>中112.5%计算出来相当于22.5px的font-size大小(112.5/100 * 20px)
  • 0.25vw相当于2px(800px * 0.25 ÷ 100)
  • <h1>的font-size大小为49px((22.5px + 2px) * 2)

不幸的是,我们要寻找的正确的

大小为body的font-size大小的两倍或者说是40px,所以该怎么办呢??

3.精度公式解决问题

有什么办法可以结合calc实现具体的功能呢?

还有一个更大的我不得不克服的问题。就是我之前曾经提出的一个疑问:”在视窗大小为800px的情况下你如何计算vw,使排版的单位大小为20px?”

让我们说说你想要的结果…

  • 当视窗大小为600px时,font-size大小为18px
  • 当视窗大小为1000px时,font-size大小为22px

我们这里给出一个公式:

这里写图片描述

首先确定最小的屏幕600px的时候对应16*1.125=18px的字体,然后600px对应18px字体—-1000px对应22px字体,这就很明显改变100px屏幕宽度字体会改变1px,所以很显然(100vw-600px)是结果多少px就对应改变百分之多少px的字体值,所以可以最终得出结论:(100vw-600px)/100的结果值就是所改变的那几个px的字体值,再加上之前的18px基础值就可以了。

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

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

相关文章

C++ STL 遍历 map 的时候如何删除其中的 element

首先看一段他人的一段文章&#xff1a;from: http://www.cnblogs.com/super119/archive/2011/10/11/2207541.html 我们通过map的erase(iterator it)方法删除元素的时候&#xff0c;如果此时erase处于遍历map的代码中&#xff0c;那么调用erase就需要小心一些。因为erase会导致…

React开发(111):写注释的方法

放上去会显示(method) Template.getDictionary(): void

数据库范式(1NF 2NF 3NF BCNF)详解

数据库的设计范式是数据库设计所需要满足的规范&#xff0c;满足这些规范的数据库是简洁的、结构明晰的&#xff0c;同时&#xff0c;不会发生插入&#xff08;insert&#xff09;、删除&#xff08;delete&#xff09;和更新&#xff08;update&#xff09;操作异常。反之则是…

小程序页面跳转的几个方法和区别

目前小程序的几个页面跳转方式的主要区别就两点&#xff1a; 1.是否可以返回上一个页面2.目标页面是否是tabBar 两个通用属性 1.限制&#xff1a;目前页面路径最多只能十层。2.分类&#xff1a;wx.navigateTo 和 wx.redirectTo不允许跳转到 tabbar 页面&#xff0c;只能用 w…

再学 GDI+[98]: TGPImage(18) - 获取 GDI+ 图像格式对应的 GUID

和在 Net 中不同的是, 在具体指定图像格式时, 这里常常需要的不是格式名称, 而是格式的 GUID;知道了格式名称, 用 GetEncoderClsid 函数可以获取格式的 GUID;GetEncoderClsid 函数来自 GDIPUTIL 单元, 本例并没有用到前面一直不可或缺的 GDIPOBJ、GDIPAPI 单元.如果要获取 imag…

STL::map默认会按照.first的字母顺序排列

看个代码&#xff1a; // map默认会按照.first的字母顺序排列#include <map>#include <string>#include <iostream>using namespace std;int main(){map<string, string> map1;map<string, string>::iterator mapit;map<string, string>:…

JS之连接数组方法concat

作用&#xff1a;用于连接两个或多个数组&#xff0c;该方法不会改变现有的数组&#xff0c;而仅仅会返回被连接数组的一个副本 语法&#xff1a;arrayObject.concat(arrayX,arrayX,……,arrayX) 参数&#xff1a;arrayX&#xff0c;必需。该参数可以是具体的值&#xff0c;也…

configure: error: Curl library not foun

yum -y install curl-devel 转载于:https://www.cnblogs.com/lehao/p/3903189.html

微信小程序:生命周期

下面从三个方面来介绍小程序的生命周期&#xff1a; &#xff08;1&#xff09;应用生命周期 &#xff08;2&#xff09;页面生命周期 &#xff08;3&#xff09;应用及页面生命周期的触发顺序 1.应用生命周期 App() 必须在 app.js 中调用&#xff0c;必须调用且只能调用一次…

在.NET3.5平台上使用LinQ to SQL + NBear 创建三层WEB应用

看了《一步一步学Linq to sql》和《在.NET 3.5 平台上使用LINQ to SQL创建三层/多层Web应用系统》 这两个系列文章后,因为一直使用NBear,所以试着综合了一下主要用NBear.IOC其它的NBear.data里的就没有会了,相应的使用LINQ来做数据处理. 之前一直使用NBear做些WEB应用主要感觉N…

递归修改子目录及文件的权限

背景&#xff1a;当我们的虚拟机和windows系统共享windows上的一个目录(记为&#xff1a;A)时&#xff0c;把该目录下的目录(记为B)移动(mv)到linux下的任意目录下&#xff0c;这个目录B及下面的子目录或文件的权限都是rwx(777)&#xff0c;这是他们在windows下的权限。因此用l…

JS之字符串连接方法join

作用&#xff1a;join() 方法用于把数组中的所有元素放入一个字符串&#xff0c;元素是通过指定的分隔符进行分隔的。&#xff08;作用和split正好相反&#xff09; 语法&#xff1a;arrayObject.join(separator) 参数&#xff1a;可选。指定要使用的分隔符。如果省略该参数&…

2.[Yii]创建与设置默认控制器及载入模板

1.创建控制器与访问 class IndexController extends Controller {//访问 index.php?rindex/index//r后面 其中第一个是控制器&#xff0c;第二个是方法&#xff0c;r就是路由route的缩写public function actionIndex(){$this->render("index");//载入模板文件} }…

程序根据手机机型设置自定义底部导航距离

需求: iponeX 以上机型,手机底部有弧度,自己写的导航栏会被遮住, 需要判断手机机型,做兼容设置. 解决: //app.js App({/*** 当小程序初始化完成时&#xff0c;会触发 onLaunch&#xff08;全局只触发一次&#xff09;*/onLaunch: function() {var that this;//获取手机型号…

张雨生《口是心非》

[hjp3]hjptypesong&player1&sonhttp://www.justin-rao.net/songs/[1997]%20ZhangYuSheng%20-%20KouShiXinFei%20-%2002%20-%20KouShiXinFei.mp3&autoplayno&captionfalse&lrc&autoreplay1&bgcolorFFFFFF&width200&height20[/hjp3] 转载于:…

JS之颠倒数组元素的reverse方法

作用&#xff1a;reverse() 方法用于颠倒数组中元素的顺序 语法&#xff1a;arrayObject.reverse() 注意&#xff1a;该方法会改变原来的数组&#xff0c;而不会创建新的数组 实例1&#xff1a;

图文:详解数据库Oracle 11g的基本安装

From: http://blog.csdn.net/wjcreator123/article/details/3243041 下面提供的是Oracle 11g的下载地址和基本安装过程&#xff08;仅作参考&#xff09; 第一步&#xff1a; oracle服务端下载: http://down.zdnet.com.cn/detail/9/82225.shtml 客户端: http://blog.csdn.net…