pc页面样式自适应的几种方案

扩展知识

1. font-size 默认值

浏览器默认fontSize为16px、即100%=16px 1px=62.5%、即默认16px 代表1rem

2. vw（相对单位）

屏幕分成100份=100vw宽 1vw=1%屏幕宽
若根HTML为1vw 即1920分辨率下即1vw=19.2px

第一种（rem适配）

一、px自动转为rem

利用 postcss-pxtorem插件，将代码中px自动转为rem

module.exports = {plugins: {'autoprefixer': {browsers: ['Android >= 4.0', 'iOS >= 7']},'postcss-pxtorem': {rootValue: 19.2,//结果为：设计稿元素尺寸/19.2，比如元素宽1920px,最终页面会换算成 100rempropList: ['*']}}
}

二、自适应计算设置根font-size的px

//默认设计感1920  html的font-size为19.2rem
windowResize();
let timer;
const BaseFontSize = 100;
window.onresize = windowResize;
function windowResize() {clearTimeout(timer);timer = setTimeout(() => {const width = document.body.clientWidth;const widthNum = width / BaseFontSize;document.documentElement.style.fontSize = widthNum + "px";}, 100);
}

三、使用

正常使用px即可

//设计稿为1920
1.使用
div{width:1920px; //postcss会将1920/19.2=100rem
}
2.动态响应式计算设置html size为xx px
默认设置19.2px

第二种（rem+vw）

一、利用postcss插件将px转为rem

二、设置html的font-size 为vw

(自动计算)

//1920分辨率下
html{font-size:1vw; 1vw=1920/100=19.2px
}

三、媒体查询

解决屏幕过大过小问题

第三种

一、根据动态计算的px设置html的font-size

//默认1920下根HTML的size为100px
windowResize();
let timer;
const BaseWidth = 1920;
const BaseFontSize = 100;
window.onresize = windowResize;
function windowResize() {clearTimeout(timer);timer = setTimeout(() => {let width = document.body.clientWidth;let widthNum = (width / BaseWidth) * BaseFontSize;document.documentElement.style.fontSize = widthNum + "px";}, 100);
}

二、使用代码使用rem

//设计稿为1920
1.使用
div{width:19.2rem; 19.2rem=1920px
}
2.动态响应式计算设置html size为xx px
默认设置100px

区别

第一种和第二种代码使用px 利用postcss插件将px转为rem
第三种是代码直接使用rem

pc页面样式自适应的几种方案相关推荐

java textarea 大小_textarea高度自适应的两种方案
阅读全文你将获得以下解决方案. 点击长文本编辑textarea,自动获得焦点随着输入值自动伸缩高度可复制添加信息可粘贴文本可粘贴图片以下实例代码执行环境为Chrome80 方案一 HTML5 ...
解决左边宽度固定，右边宽度随浏览器自适应的3种方案
解决左边宽度固定,右边宽度随浏览器自适应的3种方案前言一.使用 flex 布局三.使用 flex + min-width 二.使用 float 浮动四.总结前言在前端开发中,不管是自己写项 ...
多域名环境，页面获取url的一种方案
因为系统是分布式部署的.而且有多个域名,所以常常涉及到获取url的问题. 这是系统框架层面须要提供的能力.否则每一个模块都须要自己去想办法获取ip,就会非常混乱.上线也easy发生bug 主要须要解决 ...
pc 页面在移动端怎么获取放大倍数、_百度移动搜索开放适配服务的3种方法
为了提升用户的移动搜索结果浏览体验,百度移动搜索对具有对应手机站的PC站提供"开放适配"服务. 如果您同时拥有PC站和手机站,且二者能够在内容上对应,您可向百度"提交&q ...
一种解决h5页面背景音乐不能自动播放的方案
一种解决h5页面背景音乐不能自动播放的方案场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性现象: 1.大部分IOS系统和少部分Android微信不支持自动播放解 ...
手机端页面的自适应设计的开发思路
一直在找有关手机端页面自适应写得比较好的文章,今天终于找到一篇,个人觉得写得很详细.如果想要拿到需求就知道要适用什么方法,除了要熟练规则.多参考一些优秀网站,还要动手实践几次. 以下为转发的正文: 互 ...
“postcss-px-to-viewport”——移动端前端适配的又一种方案
0.前言博主以前在做移动端的时候主要使用 @media screen and (min-width: 1200px){ } 或者灵活点,会用之前一种流行已久的移动端适配方案,那就是rem,也就是会用 ...
帝国cms7.5电脑端手机端多终端解决方案之选择哪种方案
制作电脑站和手机端通常有三种方式, 1.代码适配:服务程序端,即通过php动态程序,根据ua来判断来自于电脑还是手机,根据终端类型来渲染不同的模板界面;这种电脑和手机端的url是保持一致的,但程序必须 ...
开发pc页面_uniapp支持PC版真正的一统天下来了全端支持不是梦
uni-app已经支持iOS.Android.H5.微信小程序.阿里小程序.百度小程序.字节跳动小程序.QQ小程序.快应用.360小程序. 现在,uni-app终于官方支持PC宽屏!一套代码多端运行, ...

pc页面样式自适应的几种方案

扩展知识

1. font-size 默认值

2. vw（相对单位）

第一种（rem适配）

一、px自动转为rem

二、自适应计算设置根font-size的px

三、使用

第二种（rem+vw）

一、利用postcss插件将px转为rem

二、设置html的font-size 为vw

三、媒体查询

第三种

一、根据动态计算的px设置html的font-size

二、使用代码使用rem

区别

pc页面样式自适应的几种方案相关推荐

最新文章

热门文章

pc页面样式自适应的几种方案

扩展知识

1. font-size 默认值

2. vw（相对单位）

第一种（rem适配）

一、px自动转为rem

二、自适应计算设置根font-size的px

三、使用

第二种（rem+vw）

一、利用postcss插件将px转为rem

二、设置html的font-size 为vw

三、媒体查询

第三种

一、根据动态计算的px设置html的font-size

二、使用 代码使用rem

区别

pc页面样式自适应的几种方案相关推荐

最新文章

热门文章

二、使用代码使用rem