大致是有一个 main 容器是 flex 布局，左边一个 logo 固定宽高，右边 content 动态宽度。 a name
a info
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. U
源文：htt普通js、jquery项目使用页面最开始引入第三方cdn的：<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></scri...
原创
2022-11-21 12:02:41
241阅读
早上在看flex属性，总结一下它的优缺点为什么使用flex，她和浮动相比，代码更少。浮动要考虑左浮动右浮动，有时还要去清除浮动。flex一行代码就搞定了。她更灵活，实现平均分配，根据内容大小分配，自动边距实现左右推开，水平居中，垂直居中等等她在IE10全面支持，IE8部分支持（带前缀）。所以在移动端放心使用，客户端根据场景使用客户端也可以结合浏览器检测库使用 下午学vue的实战兄弟组件间
响应式布局概念响应式布局就是可以让网站同时适配不同的手机端和不同的分辨率，可以让用户有更好的体验一：响应式布局实现的方式有几种（5）1. 第一种： 百分比布局所谓的百分比布局其实就是对属性设置来实现让网站适配不同的手机端分辨率，但是百分比布局是相对于父元素来说的 ，我们可以设置的属性有（margin,padding,height,width） 对于HTML元素中的（font-size ,borde
如果你看了很多篇文章，对 flexible 的解决方案一直还有一种不太了解的朦胧感觉，那么这篇文章会帮你从背景角度一步一步解析为何会有 flexible 这套解决方案，以及这套解决方案是如何作用的。 为什么不能直接用 px 进行布局 设计师基于 iphone6（375px 逻辑像素） 的页面尺寸给了
转载
2020-10-14 19:31:00
219阅读
2评论
1、引入flexible.js文件： (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; // adjust body
原创
2021-07-13 17:21:54
1052阅读
1评论
一、宽高自适应网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。（1）宽度自适应块元素宽度默认为auto（2） 高度自适应元素{height:auto;}/高度不写二、浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）解决高度塌陷的方法（
1、让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。 2、使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。 技术方案： 1、less+rem+媒体查询 2、fl
转载
2019-12-31 20:25:00
125阅读
2评论
前提：设计稿为750px 1、下载flexible.js：（它的原理是将当前设备宽度划分为10等份） (function flexible (window, document) { var docEl = document.documentElement var dpr = window.devic
原创
2021-07-13 17:21:53
234阅读
在平时的项目开发中，尤其是前端项目开发，经常会要求进行手机适配或者pc端分辨率的适配。目前比较常用的解决方案是使用flexible.js和rem结合解决。如下：1.下载响应式插件 npm i lib-flexible -D2.在项目中引入插件，比较常见的是在vue/main.js中引入import 'lib-flexible/flexible.js'3.要在nodemodule/lib-flexi
原创
2022-06-23 15:55:42
3962阅读
前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。技术栈vue-cli：使用脚手架工具创建项目。postcss-pxtorem：转换px为rem的插件。自动设置根节点html
转载
2024-02-26 12:46:39
280阅读
1.安装lib-flexible、postcss-px2rem yarn add lib-flexible postcss-px2rem-exclude --save 2.index.js文件引入 import 'lib-flexible'; 3.config-overrides.js文件覆盖 co ...
转载
2021-09-01 15:13:00
781阅读
2评论
1.什么是rem来自于鹅厂ISUX团队的解释如下： rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的
一、rem介绍rem是什么？它的全称是 font size of the root element （根元素的字体大小）它是CSS3中新增加的一个尺寸（度量）单位，根节点（html）的font-size决定了rem的尺寸，也就是说它是一个相对单位，相对于(html)。浏览器的默认字体？浏览器的默认的font-size是16px，1rem默认就等于16px。（chrome最小字体为12px）rem可
转载
2024-06-18 20:31:53
190阅读
1.在页面中引入flexible.js base.js util.js 工具类 2.安装 node-sass 安装 sass-loader 3.重置全局样式 _normalize.scss 等同于 reset.css 4.常用 mixin 函数 _mixins.scss 5.px 转 rem 函数
转载
2017-11-26 19:10:00
181阅读
2评论
前端小工具：flexible.js实现rem自适应 通过js来调整html的字体大小，而在页面中的制作稿则统一使用rem这个单位来制作。关键代码如下： ;(function(win, lib) { var doc = win.document; var docEl = doc.documentEle ...
转载
2021-11-01 09:48:00
589阅读
2评论
可伸缩布局方案 flexible.js首先需要准备 flexible.js：https://github.com/amfe/lib-flexible/blob/2.0/index.jsflexible.js 处理了什么问题
原创
2022-08-18 03:56:53
360阅读
第一步 在项目中安装lib-flexiblenpm install lib-flexible --save第二步 在main.js中引入lib-flex
原创
2022-07-06 16:26:30
252阅读
在移动端开发时，我们常常要使用rem适配页面元素大小。那么如何把px转为rem单位就是必做的换算。我们有2种方式快速的解决这个问题： 1.使用less，因为less支持变量和运算。 2.使用VS Code的第三方插件：cssrem，它能自动帮我们把px为单位的数据，转换成rem单位的数据 接下来就介绍下该插件的使用方法。 一、安装 与安装其他插件没有差别，只需要打开VS Code的扩
转载
2024-02-23 13:31:15
1819阅读
字体大小的设置单位，常用的有2种：px、pt。这两个有什么区别呢？先搞清基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；pt就是point，是印刷行业常用单位，等于1/72英寸。这样很明白，px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大
