浅谈pc端rem字体设置的问题
作者:jingxian 发布时间:2024-05-22 10:27:44
标签:rem,字体设置
1、内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常
2、长,宽,LEFT,TOP,RIGHT,BOTTOM都采用了REM,并且HTML的FONT-SIZE设置的是100PX一是觉得计算方便,二是如果设为10PX,谷歌会不兼容.此时BODY的FONT-SIZE设置为正常值,12PX.不然的话,其它的DOM都会继承HTML的100PX的FONT-SIZE,导致效果巨大。
3、当浏览器窗口变化时,内容的大小以及相对位置也会相应变化,这个依靠JS修改HTML的FONT-SIZE值实现.如下:
$(window).resize(function ()// 绑定到窗口的这个事件中
{
var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
var wH = window.innerHeight;// 当前窗口的高度
var wW = window.innerWidth;// 当前窗口的宽度
var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
$('html').css('font-size', rem + "px");
});
如果调整窗口大小,会发现HTML的FONT-SIZE值在变化,同时,使用REM设置的DOM也在变化。REM正是参考HTML的FONT-SIZE值来计算的
4、如果是在手机上,平板电脑上,更要使用REM,由于手机上一般不会调整浏览器大小,所以可以在页面载入时,设置一次即可
$(function(){
var whdef = 50/750;// 表示750的设计图,使用50PX的默认值
var wH = window.innerHeight;// 手机窗口的高度
var wW = window.innerWidth;// 手机窗口的宽度
var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
$('html').css('font-size', rem + "px");
})


猜你喜欢
- 快速排序(QuickSort)是对冒泡排序的一种改进:基本思想:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一
- 将近两个多月没有敲linux命令,手指头不听话了。该再次温习卖油翁的故事了。曾为oracle如何启动多个实例运行纠结过,不服输心理。当时在一
- 前言项目中会有点到直线距离计算、两条直线交点坐标计算、两条直线夹角计算的需求。一、点到直线距离计算由于项目中得到点的坐标最容易,因此采用向量
- openpyxl模块离线安装背景:公司的防火墙限制,无法使用pip在线安装,开墙的审批流程较为繁琐,故采取离线安装的方式。步骤如下:1、官网
- 这篇文章主要介绍了Python socket模块方法实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需
- 前言之前做了一个校园交友的APP,其中一个逻辑是通过用户的教务系统来确认用户是一名在校大学生,基本的想法是通过用户的账号和密码,用爬虫的方法
- 高斯模糊的介绍与原理通常,图像处理软件会提供"模糊"(blur)滤镜,使图片产生模糊的效果。"模糊"
- Django 开发项目是很快的,有多快?看完本篇文章,你就知道了。安装 Django前提条件:已安装 Python。Django 使用 pi
- mixins混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。当组件使用混合对象时
- 原理python没有办法直接和c++共享内存交互,需要间接调用c++打包好的库来实现流程C++共享内存打包成库python调用C++库往共享
- 前言kettle通过域名或者IP连接Oracle,本地不需要安装Oracle,但是要把Oracle的驱动jar包复制到kettle的lib目
- 一、读写文件在 Python 中,我们可以使用 open() 函数打开文件,with 语句可以自动关闭文件。读取文件内容:with open
- 治標不治本的就是將php.ini內的reporting部份修改,讓notice不顯示 error_reporting = E_ALL; di
- 1 概述一般地,在进行数据库设计时,应遵循三大原则,也就是我们通常说的三大范式,即第一范式要求确保表中每列的原子性,也就是不可拆分;第二范式
- 包 packageGo 包是 Go 语言的基本组成单元,一个 Go 程序就是一组包的集合,所有 Go 代码都位于包中Go 源码可以导入其他
- 我们可能会出现这种情况,某个表原来设计不周全,导致表里面的数据数据重复,那么,如何对重复的数据进行删除呢?重复的数据可能有这样两种情况,第一
- 来自巴西的设计师Roger Oddone的作品,通过此作品你可以了解到logo的设计的一些思路。
- 本文将讨论Python中下划线(_)字符的使用方法。我们将会看到,正如Python中的很多事情,下划线的不同用法大多数(并非所有)只是常用惯
- 本文实例讲述了python实现支持目录FTP上传下载文件的方法。分享给大家供大家参考。具体如下:该程序支持ftp上传下载文件和目录、适用于w
- 本文实例讲述了python图像处理之反色实现方法。分享给大家供大家参考。具体如下:我们先加载一个8位灰度图像每一个像素对应的灰度值从0-25