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宽屏!一套代码多端运行, ...
最新文章
- MyBatis包含这9种设计模式，你知道几个？
- dogdoggo搜索引擎_Giphy：专搜GIF动态图的搜索引擎
- 关于 SoftEther ***
- 分享两篇Google Map API的介绍
- jquery跟js初始化加载的多种方法及区别介绍
- C语言函数手册：c语言库函数大全|C语言标准函数库|c语言常用函数查询
- Vue介绍-Vue简单应用-Vue基本用法
- （TTSR）Learning Texture Transformer Network for Image Super-Resolution
- 谈谈入职新公司1月的体会
- cannot be null mysql_mysql5.7 column cannot be null-阿里云开发者社区
- C++primer 16.1.2节练习
- 《2017微信春节数据报告》出炉 初一到初五微信红包收发总量达到460亿个
- 【物理应用】基于matlab车载自组织网络中路边性能及防碰撞算法研究【含Matlab源码 263期】
- MyCat重要概念以及基础配置详解
- java使用xmlWorkerHelper将html转pdf
- 软件智能:aaas系统中的数学程序与技术服务之4 序篇之 综述2 词典lexicon
- union并不绝对比or的执行效率高
- 有原函数，可积、变限积分
- windowsserver2016安装
- Application.DoEvents();