前言在开发过程中，前端会存在多种不同的适配方案，如自适应布局，响应式布局。自适应布局：在不同设备，不同视口宽度的情况下，让页面显示效果相同。响应式布局：在不同设备，不同视口宽度的情况下，让页面显示不同的效果，如手机端和PC端的不同效果。在自适应布局中，em、rem是目前常用的适配手段，接下来主要探讨使用rem进行自适应适配的方案。一、场景已知设计图宽度是1920*1080，现需要对不同终端，不同屏
页面自适应，是指页面内容自动适应屏幕大小。实现自适应的方法有多种：1、简易场景实现自适应：浮动、页面居中、设置百分比属性、自动匹配大小。这样在页面宽度发生变化时，能利用以上特性实现简易的自适应效果。2、如果实际开发中有复杂场景的需求，一般通过编写多套CSS代码，然后用媒体查询技术，让页面根据不同屏幕尺寸来加载不同代码模块以实现适配不同屏幕的目的。这种方式需要编写多套代码，虽然工作量大，但对于不同屏
第一次做移动端的页面，遇到的第一个问题就是移动端的轮播图。其实轮播图的插件有很多，但是完全满足需求的并不容易找。需求：1.实现基本的触屏轮播图效果2.传入非标准比例的图片，可以自动平铺（有时候图片可能比例略有偏差，当然例子里的图是随便找的，平铺之后不能看呀）3.轮播图模块能实现自适应，按照固定高宽比显示，比如3：10的高宽比 一、初识rem那么这个需求的难点在哪里呢？其实就是我需要限定图
首先我们先了解下手机分辨率分辨率是指屏幕上有横竖各有多少个像素目前手机分辨率大概情况如下：QVGA分辨率：320×240简 介：QVGA即"Quarter VGA"。顾名思义即VGA的四分之一尺寸
转载
2013-11-01 18:22:00
134阅读
2评论
最近在写一个关于小说阅读的webApp，由于没有借用任何框架，所以很多底层的内容都需要自己去解决，幸好的是这次
转载
2016-09-26 23:50:00
137阅读
2评论
使用 ConstraintLayout 构建自适应界面
ConstraintLayout 可让您使用扁平视图层次结构(无嵌套视图组)创建复杂的大型布局。它与 RelativeLayout 相似，其中所有的视图均根据同级视图与父布局之间的关系进行布局，但其灵活性要高于 RelativeLayout，并且更易于与 Android Studio 的布局编辑器配合使用。
本文展示约束条件中的几种用法。
约
需求：是实现全局页面中字体自适应。警告：下面实现主要是在Vue中进行配置的，把全局中的px转换成rem进行实现自适应窗口变化。一、实现方式：1、下载所需插件pnpm install lib-flexible-computer -S
pnpm i px2rem-loader -D
pnpm install postcss-px2rem-exclude -D2、在main.js进行全局引入impor
1问题描述我们使用vue做项目的时候，常常需要做到echarts图表的自适应，一般是根据页面的宽度做对应的适应。本文记录一下设置echarts图表的自适应的步骤。我们先看一下没有做echarts自适应的效果无自适应效果图
我们发现echarts图的宽度并没有随着页面宽度的变化而变化
有自适应效果图2 解决下载依赖：cnpm install echarts --save代码步骤echart图表
如在1920屏宽下字体设置为12px，就可以传入12给fontSize。在需要设置字体的地方可以这样写，
原创
2022-12-21 10:23:46
348阅读
1、简介 calc()看其外表像个函数。平时在制作页面的时候，总会碰到有的元素是100%的宽度（例如body元素）。如果元素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这些都会让你的盒子撑破。我们换句话来说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任
作为前端工程师的我们，在h5页面布局的过程中会使用rem布局，大家都知道rem是相对长度单位，但是作为前端的我们该如何去让rem布局自适应iphone4、iphone6、iphone6、iphone6plus的呢？那我们都看到天猫在手机网页端中，是根据手机大小的不一样去自适应的，那么我们接下来让我们自己的h5网页的页面自适应手机设备一、首先我们先看一下拥有几亿用户的淘宝天猫是怎么做的呢？iphon
原创
精选
2018-01-12 15:45:24
9834阅读
点赞
6评论
vw视口宽度，由于本事就是跟随屏幕变化的，所以更具有灵活性，不用js获取窗口来动态设置窗口宽度，现在用的比较少，公司目前不让用，先记录，也许以后用得到。//配合less不用自己换算，设计稿750px//定义变量vw=7.5vw//假设元素400px宽度，换算成vw即为400/@vw@vw:7.5vw;.container{padding:51/@vw43/@vw23/@vw45/@vw;.fist
原创
2019-06-03 14:42:49
4220阅读
点赞
屏幕大小：一：不同的layoutAndroid手机屏幕大小不一，有480x320, 640x360, 800x480.怎样才能让App自动适应不同的屏幕呢？ 其实很简单，只需要在res目录下创建不同的layout文件夹，比如layout-640x360,layout-800x480,所有的layout文件在编译之后都会写入R.java里，而系统会根据屏幕的大小自
强大的屏幕适配布局rem响应式 实现一套web代码多端自适应适配 实现强大的屏幕适配布局 流式的布局、固定的宽度，还有响应式来做，但是这些方案都不是最佳的解决方法。->->rem rem是什么？ rem（font size of the root eleme
unity3d自带的功能能在不用写代码的情况下使ui适配不同的分辨率。画布的Canvas Scaler选项中的UI Scale Mode有3个选项：恒定像素、随屏幕尺寸缩放、恒定物理大小。这里我推荐用第二项随屏幕尺寸缩放。这样在大小不同的分辨率中ui可以自动变大变小。选择第二项之后需要填入我们使用的标准分辨率。填我们制作时主要考虑的分辨率即可。之后制作时也是先在这个分辨率下制作和观察效果，之后再切
#define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)
原创
2013-07-31 12:22:53
729阅读
一、定速巡航——L1级别定速巡航系统（CCS：Cruise Control）：驾驶员设定目标车速（手动加速或减速），不能根据实际路况对车辆的行驶状态进行调节或者给予必要的预警提示，缺乏对环境的应变能力。驾驶员需要时刻关注车辆的行驶状况，踩刹车后定速巡航关闭，恢复时需重新设定。定速巡航的速度固定，不适用于频繁刹车路况（只能限定速度，方向盘和刹车需驾驶员控制）。特点：（1）超车，踩加速踏板，超车完成后
rem 是一种相对的尺度，相对于根元素设置的font-size,但不能简单粗暴的直接对根元素设置字号来决定1rem的大小。
原创
2019-07-18 17:23:25
1599阅读
网页自适应屏幕宽度到底是怎么做到的？1.首先，在网页代码的头部，加入一行viewport元标签： viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、
最近的一个小项目用到了自适应的布局方案，之前做过的一个移动端项目也用到了自适应的布局方案。当时公司只有我一个前端，以前的项目也没有使用过相关的技术，所以我需要从零开始了解相关的技术并且要能够在项目中应用。首先我们需要了解屏幕显示的一些原理，忽略各种屏幕的实现原理，一块屏幕上有固定数量的小方块，每个小方块就是一个屏幕物理像素点。屏幕的分辨率就是说的屏幕上像素点的数量。分辨率要和屏幕尺寸结合来看才有意
