PC端自适应-rem

rem：是指相对于根元素字体大小的单位，一个相对单位。rem可以做到随着根元素的字体大小随之变化，达到自适应屏幕的效果。

使用步骤如下：

1、在html的head中加上meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

代表宽度是设备宽度，同时不允许缩放。
2、设置根元素——相对于根元素html

html {font-size: 100px;} //100px方便计算，实际值需要自己确定

设置这个值，谷歌浏览器不会受影响，当是IE浏览器等时，会受影响，根据实际去调整值。
3、计算不同屏幕时根元素
可以使用媒体监听，也可以使用动态js计算，本文因为不确定自适应数量使用动态计算

var deviceWidth
setHtmlFontSize()if (window.addEventListener) {window.addEventListener('resize', function () {setHtmlFontSize()}, false)
}
function setHtmlFontSize () {// 1366是设计稿的宽度，当大于1366时采用1366宽度，比例也是除以13.66deviceWidth = document.documentElement.clientWidth > 1366 ? 1366 : document.documentElement.clientWidthdocument.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 13.66 + 'px !important'
}

var deviceWidth;
setHtmlFontSize();
function setHtmlFontSize() {let deviceWidth = document.documentElement.clientWidth;document.getElementsByTagName("html")[0].style.cssText ="font-size:" + deviceWidth / 11 + "px !important";}

4、根据高保真还原
每个单位大小用实际值除以100得到相对的rem值。

文章链接

PC端自适应-rem相关推荐

html页面自动适应pc端,自适应PC端网页制作使用REM(示例代码)
做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...
关于如何将轮播图在移动端和pc端自适应的操作
我用的bootstrap框架做的,轮播图代码用的bootstrap上的. 如何做到pc端和移动端兼容,关键在于一张图片需要2份,一份大的图,一份小的图,通过屏幕宽度的改变,来确定展示大图片还是小图片. ...
【前端之路】通过css让移动端与pc端自适应
跨平台移动WEB技术一.目的 1.了解什么是响应式WEB设计 2.掌握CSS3媒体查询的使用 3.熟悉什么是栅格系统 4.掌握弹性盒布局 5.掌握汉堡菜单的制作二.制作一个页面: 1.PC端为国字 ...
H5与js实现手机端和pc端自适应播放器
h5视频播放实现效果自适应实现实现实现效果 pc端手机端自适应实现 1.允许网页自动调整,在html文件的头部添加一行viewport元标签 <meta name="vie ...
零基础ECharts 图表使用步骤流程图详解与 pc 端自适应
前言:呦呦呦是我我来了我是静静,这回又是零基础 echarts 图表的使用,最近项目中要用到echarts 使用,实话是在使用中,一共就三个步骤,看完开发文档稳稳当当的就会使用,但是大家懒啊所以这 ...
PC端自适应（vue）移动端+vant
npm i lib-flexible -S npm i px2rem-loader -D 安装完成以后在main.js引入 import 'lib-flexible' 在 vue-cli 生成的 we ...
html,css期末项目pc端自适应适配
前期准备 1. 在vscode中下载px to rem rem适用于网页适配可以将px转换为rem(快捷键alt+z) 2. 将所有的网页代码用一个div包裹起来,写上样式,让网页自适应居中 < ...
vue项目pc端使用rem进行适配（lib-flexible+postcss-pxtorem）
1.使用vue-cli创建项目 vue create my-app 2.安装lib-flexible与postcss-pxtorem依赖 npm install lib-flexible -Snpm ...
vue 项目移动端 PC端自适应
参考文章:https://www.cnblogs.com/zhaohui-116/p/13609107.html 一.安装淘宝插件 lib-flexible npm i -S amfe-flexi ...

PC端自适应-rem

PC端自适应-rem相关推荐

最新文章

热门文章