浏览器设置rem常用方法rem，它是相对根元素 html 的 font-size 字体大小来变化的。而浏览器的默认根元素字号是16px，也就是说默认情况下，浏览器的 1rem = 16px。那么在使用过程中，咱们不可能通过16px来计算，因为那么太麻烦了。比如你要设置一个 div为 25px 的宽度，你得将 25px/16px = 1.5625rem，然后才能正常使用rem。所以，咱们可以直接更改
# 1.rem基础 #
>rem单位
-是一个相对单位。类似em,em是父元素字体大小
-不同的是rem的基准是相对于html元素的字体大小
-比如 根元素（html）设置font-size = 12px ;非根元素设置width:2rem 则换算成px就是24px
优点就是可以通过修改html里面的文字大小来改变页面中元素大小
# 2.媒体查询 #
## 2.1 媒体查询介绍 ##
媒体查
本文主要对以下问题的思考当我门开发一个h5页面时候，到底是 pc和h5共用一套页面 还是分开开发两套呢？现象分析：网易、淘宝等大厂 是 分开开发，也就是 pc一套，h5一套
拉钩。某些个人博客 公用一套结论需要分情况而定，像网易淘宝此类的pc端页面复杂的 是适合分开两套开发，因为h5和pc端布局差异较大，不方便做响应式开发，
而个人博客这样的 pc端就是一个列表而已 最多加一个侧边栏的 这种简单
一. 移动端基础知识在移动端开发时，我们经常发现出现布局后有不兼容的问题，如何在不同设备上进行适配呢，希望康完这边，你能从原理到应用彻底熟悉移动端适配。1.1 手机屏幕现状移动端设备屏幕尺寸非常多，碎片化严重。 Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有传说中的2K，4k屏。 近年来iPhone的碎片化也加剧了
前言：使用vue开发移动端页面时，往往需要实现页面根据不同设备屏幕进行尺寸的适配，实现将px自动换算成rem单位，其实只需要安装下面的两个插件即可快速实现移动端适配问题。1 准备工作：a. 安装 px2rem-loader 插件：npm install px2rem-loader --save；b. 安装 lib-flexible 插件：npm install lib-flexible --sav
转载
2024-07-28 10:43:26
222阅读
一、区别px是相对于显示器屏幕分辨率而言的。em相对于浏览器的默认字体尺寸。rem相对于HTML根元素。二、使用 1、em任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*
由于公司做的软件是运行在特定pda设备上，因此开发时，我们不需要考虑屏幕适配等问题，毕竟如果考虑屏幕适配问题的话，需要美工多做几套图片来，而公司美工又少，因此屏幕适配问题就没有考虑过。只是前几天有人问我Android App开发时屏幕适配问题，我只知道可以在Res文件夹下多建立几个drawable文件夹，运行时手机会根据屏幕的尺寸来自动寻找合适的图片，或者在layou
转载
2023-07-27 16:25:50
70阅读
视口在前一段时间，我曾经写过一篇关于viewport的文章。最近由于在接触移动端开发，对viewport有了新的理解。于是，打算重新写一篇文章，介绍移动端视口的相关概念。关于这篇文章说到的所有知识，本质上离不开以下代码<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, min
转载
2024-06-28 20:01:12
553阅读
移动端适配方案，说多也很多。可以使用百分比布局，但百分比与em都是基于父元素进行计算的，在实际应用中不是很方便。使用rem不仅可以设置字体大小，块大小也可以设置。而且可以良好的适配各种终端，所以这方案很受欢迎。rem定义及浏览器支持情况rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就
转载
2024-08-23 21:40:25
668阅读
前言：有一个还在上大学的小学弟问博主有没有啥屏幕适配简单的方法，把鸿洋大神的帖子发给他，他说看不懂，鉴于其学Android的时间很短，所以自己出一篇比较容易的简单方法的帖子（百分比适配）。现在用AS新建一个项目，都会默认用到一个布局–ConstraintLayout，而博主主要给大家介绍一下下图红框内的部分的前两种（类似于ps的参考线） 首先要会对位置进行设置–以前有写过一个博客——Android
转载
2023-09-05 14:16:49
100阅读
摘要：rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。rem是什么？rem（font&nbs
rem适配方案 作用： 让一些不能等比自适应的元素，达到当设备尺寸发生变化的时候，等比例适配当前设备 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配rem实际开发适配方案1rem + 媒体查询 + less技术1、 设计稿常见尺寸宽度设备常见宽度iphone45640pxiphone6787
转载
2024-04-02 15:29:11
519阅读
VW适配（不使用JS）viewport 设置:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">不同设备完美视口的大小是不一样的iphone6 -- 375iphone6plus -- 414由于不同设备视口和像素比不同，所以同样的3
壹 | Fisrt移动端适配的是什么？我们讨论的是网页适配多种尺寸屏幕，让网页效果看起来和设计师的设计稿一样。说白了就是同一套代码在不同分辨率的手机上跑时，页面元素间的间距，留白，以及图片大小会随着变化，在比例上跟设计稿一致。举个粟子吧图1. 260*400的屏幕 图2. 380*400的屏幕 上边的页面在不同大小屏幕上的展现，咋一看没什么问题，一般
关于css中的单位大家都知道在css中的单位，一般都包括有px,%,em等单位，另外css3新增加一个单位rem。其中px，%等单位平时在传统布局当中使用的比较频繁，大家也比较熟悉，不过px单位在进行自适应布局的过程当中则会有些力不从心，大部分的解决方案是使用%为单位配合@media媒介查询来进行自适应布局。不过还有另外一个css3新添加的单位也同样可以拿来进行自适应布局，在我看来这种方法也更加方
自适应1. 首先是建立多个layout文件夹(drawable也一样)。在res目录下建立多个layout文件夹，文件夹名称为layout-800x480等。需要适应那种分辨率就写成什么。注意：a. 较大的数字要写在前面：比如layout-854x480而不能写layout-480x854.b. 两个数字之前是小写字母x，而不是乘号。2. 在不能的layout下调整layout 的长宽等各种设置。
转载
2024-02-13 20:06:18
95阅读
rem适配一, 网易适配方法 屏幕宽度/设计稿rem宽度=页面动态font-size值（如：375/7.5=50） document.documentElement.style.fontSize = document.docum
转载
2024-06-30 12:29:26
122阅读
对于移动端的开发，rem 适配必不可少，我们可以用多种方式实现，下面给出一种方案 在 index.html 中添加如下代码 这里基于宽 320px 的屏幕分成了 16 份，也就是 1rem = 20px，目前大多数设计稿都是根据 iphone6 的宽（ 375px ）走的，建议大家在这里分成 25
转载
2017-03-09 00:29:00
106阅读
2评论
vue-屏幕适配方案一，PC端适配开发PC端项目，通常会要求适应各种的屏幕尺寸，并且要求浏览器缩小页面等比例变化，因此就要求写出来的前端页面是能够自适应的。 利用webpack配置px2rem-loader和1、安装npm install px2rem-loader -D
npm install lib-flexible -S lib-flexible来实现px转化rem2、在项目入口文件 ma
转载
2024-06-23 13:49:53
1023阅读
一、大屏项目屏幕分辨率适配:1366*768 和 1920*1080 和 2560*1440 和 4096×2160和其他二、css方案选择:1、字体大小以 “相对单位rem” 为单位更合适(以 1920*1080 的设计稿为基本尺寸设置 rem 值)(字体相对单位)2、大的布局的宽高以 “相对单位vh,vw” 为单位更合适(视窗相对单位,高宽占满)3、内容的布局使用%,display:flex
转载
2024-06-02 23:39:30
2377阅读
