1、固定布局固定布局是第一次做移动端的朋友们最好的选择方式，思路沿用PC端，上手比较快。<head>里把viewport加好，然后设想整个网页的宽度为320px即可。其他地方PC端怎么布局，这里类似即可。缺点也显而易见，大屏手机显示网页比较宽，而固定布局宽度参照永远是320px，导致左右两边会有空白。就像你用27寸显示器看980px宽度网页一样。另一个方面就是手机横屏的时候，两边空白更
转载
2024-10-11 20:30:08
155阅读
使用rem的原因以前有些适配做法，通过js动态计算viewport的缩放值（initial-scale）。以屏幕320像素为基准，设置1，那屏幕375像素就是375/320=1.18以此类推。这样强制页面缩放过于粗暴，会导致页面图片文字失真模糊。Px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父元素的f
思考1. 我们适配的目标是什么？ 2. 怎么去达到这个目标的？ 3. 在实际的开发当中使用？答案1. 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后 页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸 也会发生变化，从而达到等比缩放的适配。rem 实际开发适配方案① 按照设计稿与设备宽度的比例
转载
2024-07-20 19:24:59
37阅读
如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem 。为什么这三个中要推荐 postcss-plugin-px2rem呢？因为 postcss-plugin-px2rem 这个插件 配置选项上有 exclude 属性，它可以配置 是否对 某个文件夹下的所有css文件不进行从px到rem的转换。所以我们可以利用这个特性
转载
2024-06-17 07:37:43
47阅读
1. Resizable 属性原理: 页面加载完毕后,EasyUI主文件会扫描页面上的每个标签,判断这些标签的class值是否以"easyui-"开头,
如果是,则拿到之后的部分"resizable",EasyUI主文件会将当前的标签处理(渲染)为"resizable"这种效果;EasyUI 组件包括: 属性,事件和方法;// 以标签的形式,实现resizable
// 其中,data-optio
关于css中的单位大家都知道在css中的单位，一般都包括有px,%,em等单位，另外css3新增加一个单位rem。其中px，%等单位平时在传统布局当中使用的比较频繁，大家也比较熟悉，不过px单位在进行自适应布局的过程当中则会有些力不从心，大部分的解决方案是使用%为单位配合@media媒介查询来进行自适应布局。不过还有另外一个css3新添加的单位也同样可以拿来进行自适应布局，在我看来这种方法也更加方
我想做安卓的朋友们，很多即便是做了好几年的安卓，对屏幕的各种适配，有时候也会弄的比较头痛！即便是采用了各种是配方法，但是有时候，感觉还是不是很满意！经过和很多大神讨论，沟通和参考，我总结的这个屏幕适配方案，是目前公认最合理并且最简单的： 废话不多说： 直接上步骤： 1.打开这个链接：https://pan.baidu.com/s/1dEFu3x3下载
转载
2024-04-01 08:17:39
61阅读
思维导图让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。一：less+rem+媒体查询设计稿常见尺寸宽度动态设置 html 标签 font-size 大小<!DOCTYPE html>
<html
转载
2024-05-27 23:41:43
245阅读
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>CSS 网页布局</title>
6 <meta name="viewport" content="width=dev
转载
2024-10-12 16:10:39
28阅读
好久没来了。觉得就是自己懒了。最近在做屏幕适配时发现了许多坑，也有许多自己的一些心得。也许不是太深。可能主要是以应用为主。所以可能是一个系列来写。Storyboard和Auto Layout 。这里不的不说Storyboard很强大。并且apple也在推荐使用Storyboard。至于Storyboard和Auto Layout，这个网上有好多教程。后期的系列中我也会对它们的使用进行
转载
2024-01-10 21:21:04
54阅读
界面适配前言讲真的，在项目开发中，界面适配是非常重要的，在Android上面有俩个很火的界面适配库：AndroidAutoLayout和AndroidAutoSize，AndroidAutoLayou用起来感觉还是略有点麻烦；AndroidAutoSize我之前，在刚开始一个项目里面引入了，可是这个库的侵性太强，按照头条的适配原理去实现的，改变了：density 的值，这个值是个很重要的值：px
转载
2023-06-23 14:34:13
0阅读
使用的方案 lib-flexible-computer + px2remLoader + postcss-px2remlib-flexible：阿里可伸缩布局方案
px2rem-loader：px 转 rem
postcss-px2rem： 将代码中px自动转化成对应的rem的一个插件
下面这个插件会代替lib-flexible 更好一些 适用于pc
npm i lib-flexible-co
以上为基于320的设计稿，若要基于375，只需将mixin中320改为375即可。若要100px=1rem，只需将mixin中10改成100即可。当然，这只能实现大部分常规机型的适配，有些特殊机型还是需要自己再加上对应的适配。 接下来罗列一下我用到过的适配，希望得到各位帮助逐步完善。 原文地址：ht
转载
2022-05-05 11:38:02
127阅读
如果你看了很多篇文章，对 flexible 的解决方案一直还有一种不太了解的朦胧感觉，那么这篇文章会帮你从背景角度一步一步解析为何会有 flexible 这套解决方案，以及这套解决方案是如何作用的。 为什么不能直接用 px 进行布局 设计师基于 iphone6（375px 逻辑像素） 的页面尺寸给了
转载
2020-10-14 19:31:00
219阅读
2评论
PC端的一些简单适配不同比例的屏幕需要展示的内容一样16:9 24:9 32:9的屏幕比例需要显示同样的内容主要是使用的是rem布局, 这里通过调节不同分辨率的时候, 左边盒子和中间盒子的宽度比例关系保持不变依赖模块postcss-px
移动端的适配方案：flex + rem单位 做适配效果 （比如淘宝和小米移动端） 当前市场最多flex + viewport width /vh单位 做适配效果 （比如 B站移动端 ） 新兴，马上的一个趋势让flex做布局（盒子摆放），让rem或者vw/vh 实现网页元素的尺寸（宽度和高度）适配屏幕 1.rem适配1.rem单位rem是一个相对单位它是相对于html标签字号大小计算结果1
rem适配一, 网易适配方法 屏幕宽度/设计稿rem宽度=页面动态font-size值（如：375/7.5=50） document.documentElement.style.fontSize = document.docum
转载
2024-06-30 12:29:26
122阅读
玻璃幕墙LED透明屏屏在设计屏体时，要考虑显示内容、空间条件、屏体尺寸、像素等重要因素，同时要确保生产工艺、技术指标等适合玻璃幕墙实际应用需求，再结合项目造价，进行合理设计。本文结合联曼光电的工程经验，分析户外玻璃幕墙LED透明屏的设计、安装、测试及维护等注意事项。一、项目情况1.1 项目环境分析玻璃幕墙显示系统分为主屏1个部分，位置位于商场入口正上方。主屏建设需求是广告播放，商场入驻品牌商家投放
1.权重适配<span style="font-size:18px;">通过android提供的(权重)剩余空间分配，以达到适配的效果
注意：这是控件的宽或者高的尺寸要设置为0dp 权重值越大所占比例越大
<span style="font-family:'Times New Roman';font-size:14px;color:#000000;border-collapse:
转载
2023-09-15 17:22:05
68阅读
移动端适配方案，说多也很多。可以使用百分比布局，但百分比与em都是基于父元素进行计算的，在实际应用中不是很方便。使用rem不仅可以设置字体大小，块大小也可以设置。而且可以良好的适配各种终端，所以这方案很受欢迎。rem定义及浏览器支持情况rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就
