【学习】自适应PC端网页制作使用REM

做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080

使用了几种办法

1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常

2.使用rem的地方

width,height,margin,padding,left top都采用了REM,

HTML的FONT-SIZE设置的为100PX.是为了计算方便.此时BODY的FONT-SIZE要设置为正常值,例如14PX.不然的话,其它的DOM都会继承HTML的100PX的FONT-SIZE,导致效果巨大.

3.当浏览器窗口变化时,内容的大小以及相对位置也会相应变化,这个依靠JS修改HTML的FONT-SIZE值实现.如下:

$(window).resize(function ()// 绑定到窗口的这个事件中
{

let designSize = 1920; // 设计图尺寸

let html = document.documentElement;

let wW = html.clientWidth;// 窗口宽度

let rem = wW * 100 / designSize;

document.documentElement.style.fontSize = rem + 'px';

});

计算font-size的逻辑是:

当设计图是1920时,规定HTML的FONT-SIZE的值是100. 也就是,当浏览器窗口调整到1920PX时,1REM=100PX,如果要设定一个160PX(1920设计图时)的margin-top,那么REM设置值是1.6rem.

当窗口调整到非设计图的宽度如winWidth时,HTML的FONT-SIZE值是:(100/1920)*winWidth.也就是说,1920下FONT-SIZE是100px.那么winWidth下,按比例计算.

或者可以这样:窗口宽1920时,FONT-SIZE是100PX,那么winWidth时,相当于窗口变化为1920时的 (winWidth / 1920).根据比例公式,winWidth时的FONT-SIZE就是

(winWidth/1920)*100

winWidth / 1920 = FONT-SIZE(PX) / 100

100 / 1920 = FONT-SIZE(PX) / winWidth 这个公式容易理解

如果调整窗口大小,会发现HTML的FONT-SIZE值在变化,同时,使用REM设置的DOM也在变化.因为REM正是参考HTML的FONT-SIZE值来计算的

4.如果是在手机上,平板电脑上,更要使用REM

由于手机上一般不会调整浏览器大小,所以可以在页面载入时,设置一次即可

$(function(){

let designSize = 750; // 设计图尺寸

let html = document.documentElement;

let wW = html.clientWidth;// 窗口宽度

let rem = wW * 100 / designSize;

document.documentElement.style.fontSize = rem + 'px';

})

5.使用REM能够较好的自适应移动端

手机平板移动设备的宽度不超过1080,如果设备已经超过了这个宽度,则不应再计算html的font-size值了.因为已经是PC屏幕了.

if ( window.innerWidth>1080)

return;

6.关于字体大小

如果字体大小使用rem,由于rem是计算出来的.所以字体大小变化会比较明显.

假如有同一段文字,设了0.2rem(大约是20px),从pc大屏上移到手机小屏上后,会变得很小. 例如由PC到手机,html的字体由100px 变成了 50px,此时,手机上的这段字会小一半...

人总是希望pc屏幕上看到的文字,在手机上仍然能看得清楚,可以接受一点缩小,但不能是巨变.

目前没找到合适的解决办法,暂时如下:

字体大小font-size不应使用rem,可以使用em.对body元素设置一个基准字体大小.

对于太小的手机屏幕做个媒体查询,现在手机360px以上的显示14px的字体是清晰的,更大一点的也可以设为16px基准

body{

font-size:14px;

}

// 或者更大一些

@media (min-width: 992px) {
font-size:16px;
}

// 对于小屏手机

@media (max-width: 320px) {
font-size:12px;
}

【学习】自适应PC端网页制作使用REM相关推荐

pc端rem适配_自适应PC端网页制作使用REM
做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...
html页面自动适应pc端,自适应PC端网页制作使用REM(示例代码)
做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...
页面的版心html,关于PC端网页版心及网页自适应问题
通常设计师在设计PC端网页时会将页面主要的信息内容置于页面中间的1200px范围内,这1200px也就是俗称的版心了.这是网页设计的规则之一,目的是帮助前端制作PC端的页面自适应.目前市面上主流的屏幕 ...
【第五部分 | JS WebAPI】6：PC端网页特效与本地存储
目录 | 概述 | PC端网页特效之三大系列 1-1 elementObj . offsetXXX 属性 1-2 elementObj . style 和 offset 的区别 1-3 案例:获取鼠标 ...
javaScript PC端网页特效
PC端网页特效 1. 元素偏移量 offset 系列 1.1 offset 概述 1.2 offset 与 style 区别 2. 元素可视区 client 系列 2.1 立即执行函数 2.2 loa ...
html5多屏互动游戏,多屏互动 —— 手机端与PC端网页互动的现有尝试及设想
不可否认,多屏时代已经到来. 手机/平板/笔记本/PC/TV等,多个显示平台的逐步构建,为信息传播及交互提供了多重平台及体验选择. 素材:多屏自适应网页设计/多屏延生设计在此篇文章,取手机端与PC端 ...
JS PC端网页特效（一）
2022年7月27日周三学习记录博客学习进度:PC端网页特效(一).学习时长:6h. 目录 PC端网页特效 1.元素偏移量 offset 系列 1.1 offset 概述 1.2 offset ...
PC端网页特效二：mouseenter 和 mouseover 的区别、动画函数封装
目录 5.mouseenter 和 mouseover 的区别 6.动画函数封装动画实现原理简单动画函数封装动画函数给不同元素记录不同定时器缓动效果原理动画函数多个目标值之间移动缓动函 ...
JavaScript—— PC 端网页特效
目录一.PC 端网页特效 1. 元素偏移量 offest 系列 1.1 offset 概述 1.2 offset 与 style 区别案例:获取鼠标在盒子内的坐标案例:模拟框拖拽 html cs ...

【学习】自适应PC端网页制作使用REM

【学习】自适应PC端网页制作使用REM相关推荐

最新文章

热门文章