Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remlib-flexible 用于设置 rem 基准值下面我们分别将这两个工具配置到项目中完成 REM 适配。一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）1、安装 # yarn a
移动端网页宽度几乎全为移动设备屏幕宽度的100%，而每个移动端设备的屏幕又有着各不相同的宽度。 为了使页面在在不同的移动设备上能够保持统一的显示效果，这个时候就需要为移动端网页进行适配了。移动端的适配方案有很多种，比如百分比布局,弹性和rem.vh 布局。flex + rem单位 做适配效果 （比如淘宝和小米移动端） 当前市场最多 flex + viewport width /vh单位 做适配效果
$(function(){ var currClientWidth, fontValue,originWidth; //originWidth用来设置设计稿原型的屏幕宽度（这里是以 Iphone 6为原型的设计稿） originWidth=640; __resize(); //注册 resize事件 window.addEventListen...
转载
2016-07-29 11:05:00
214阅读
2评论
移动端适配rem的两种方法rem是根据你的根元素html的字体大小进行换算的，所以一切换算都要从font-size进行着手。方法一：用media方法就是根据你需要的几台设备来进行设置来进行适配。代码类似如下：html{
font-size: 100px;
}
/* ip6 */
@media screen and (min-width:375px) {
一. 移动端适配1.安装两个插件库 lib-flexible和px2rem-loader flexible.js是淘宝官方H5移动适应解决方案 px2rem会在项目编译的过程中根据根结的font-size值将我们项目css中的px单位转成rem， 其中不需要转成rem的可以写成PX ，UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内，打包适配时不会读取相关css,
https://gitee.com/eric167/pc-rem-demo
原创
2021-07-31 16:04:37
1039阅读
视口在前一段时间，我曾经写过一篇关于viewport的文章。最近由于在接触移动端开发，对viewport有了新的理解。于是，打算重新写一篇文章，介绍移动端视口的相关概念。关于这篇文章说到的所有知识，本质上离不开以下代码<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, min
(function (designWidth, maxWidth) { var doc = document, win = window; var docEl =
原创
2022-07-13 11:01:55
54阅读
序言：今天周日，我正坐在黄埔区图书馆，思索着关于移动端屏幕适配的问题。作为一名年纪轻轻的前端马蓉，不，是码农，移动端屏幕适配的方案的帖子没读过100篇吧，也读过几十篇了。可是今天我又在思考这个问题了，因为下周我有个关于移动端适配的演讲。人生这么短暂，我却把有限的时间奉献到了无限的前端道路上。根据我不（cong）太（ming）灵（jue）活(ding)的大脑的努力思考。我发现现阶段比较流行移动端适配
目录一、背景介绍1.1 为什么要进行移动端适配1.2 移动端适配方案二、rem方案2.1 什么是rem2.2 怎么根据屏幕尺寸设置根元素html的font-size2.3 postcss-pxtorem三、viewport方案3.1 什么是viewport方案3.2 postcss-px-to-viewport四、总结（如果只想看实现步骤可跳过前面直接看本节）4.1 rem方案实现步骤总结4.2
写在前面：既然是移动端的适配，那么出现这个技术名词也肯定是有原因的，移动端适配所要解决的是手机快速发展，什么苹果、华为、等等还有啥锤子手机每个品牌的手机都有着不同的物理分辨率，这样就会导致，每台设备的逻辑分辨率也不尽相同，这时候px如果写死的话就会出现视图挤压甚至没有显示的问题，谁也不想看到的东西只有一大半或者还要每一行都要左右拖动滚动条。像素首先要说的就是日常的手机是以对角线的长度就是这个屏幕的
一、居中布局内容主要在页面的正中央位置，突出显示，常见于登录、注册、提示用户、或点击头像查看大图等场景：1.中文布局CSS库<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout"> -->
<style>
:root {
html { font-size: 16px;}@media screen and (min-width: 320px) {html { /* iPhone5的320px尺寸作为14px基准，320px正好14px大小, 375 16px */ font-size: calc(100% + 2 * (100vw - 320px) / 55); fon
原创
2019-04-15 16:08:07
9462阅读
1评论
网页中字体大小最小是12px，不能设置一个比12像素还小的字体 如果我们设置了一个小于12px的字体，则字体自动设置为12 0.1333333vw = 1px 5.3333vw = 40px rem就是通过html中的 font-size的大小来决定的 代码: // psd设计图的像素宽度 @sj- ...
转载
2021-08-20 11:05:00
594阅读
2评论
移动端开发适配2种方案总结针对移动端适配的方案~一： 第一种方案是：所有的单位使用rem来适配；首先在页面上设置html的font-size的大小；如下我项目中的设置：html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html {
适配方案移动端的适配方案：flex + rem单位 做适配效果 （比如淘宝和小米移动端） 当前市场最多flex + viewport width /vh单位 做适配效果 （比如 B站移动端 ） 新兴，马上的一个趋势让flex做布局（盒子摆放），让rem或者vw/vh 实现网页元素的尺寸（宽度和高度）适配屏幕rem适配:rem 是一个相对单位，1rem 就是 html 文字的大小比如html {
至今除了小程序没怎么接触过移动端，问了下朋友移动端都是怎么做适配的 1.rem，这个单位转换比较麻烦，特意问了下有没有什么可以自动转的，这里给出一个叫px2rem-loader的工具，和lib-flexible一起使用的 2.boots tarp这个框架，，已经很久没用了，留个标记需要的时候去捡起来 ...
转载
2021-08-19 16:02:00
210阅读
2评论
vue项目移动端、pc端适配方案lib-flexible 根据屏幕宽度，自动设置html的font-sizepostcss-px2rem 自动将px单位转换成rem一、第一步先安装 flexible和 postcss-px2rem（命令行安装）npm i lib-flexible -S
npm i postcss-px2rem -S简要介绍这两个包的用途：flexible会为页面根据屏幕自动添
以上为基于320的设计稿，若要基于375，只需将mixin中320改为375即可。若要100px=1rem，只需将mixin中10改成100即可。当然，这只能实现大部分常规机型的适配，有些特殊机型还是需要自己再加上对应的适配。 接下来罗列一下我用到过的适配，希望得到各位帮助逐步完善。 原文地址：ht
转载
2022-05-05 11:38:02
111阅读
如果你看了很多篇文章，对 flexible 的解决方案一直还有一种不太了解的朦胧感觉，那么这篇文章会帮你从背景角度一步一步解析为何会有 flexible 这套解决方案，以及这套解决方案是如何作用的。 为什么不能直接用 px 进行布局 设计师基于 iphone6（375px 逻辑像素） 的页面尺寸给了
转载
2020-10-14 19:31:00
189阅读
2评论
