750的设计图html除以2

2024-10-27

谈谈我的移动端rem适配方案

最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解,趁着这段时间有点闲就整理了一下自己的移动端rem适配方案: 1.思路很简单,首先我们得明白一样东西,就是viewport,简单的说就是我们打开谷歌浏览器模拟手机不同型号时看到的不同像素比例大小,i5为320x568,i6为375x667,其它的就不一一列举了,现在假设我们ui给出的设计图大小是750

750的设计图以rem为单位的移动设备响应的设置大小

750的设计图,设置font-size: 125%; 1rem =20px; 大部分浏览器默认的字体大小为16px,谷歌默认字体大小为12px; 其他设备的fon-size的比列: 320/720*(20/16*100%)

移动端rem处理字体的js代码

(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = document.body.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 1

视网膜New iPad与普通分辨率iPad页面的兼容处理

一.这是篇经验分享就算不是果粉也应该知道,iPad2与new iPad的重大区别之一就是显示屏的分辨率.new iPad显示屏被称之为“视网膜显示屏”,其设备分辨比(之前有详细介绍,点击这里查看)是iPad2的两倍. – iPad mini也是普通分辨比. iPad2与new iPad同时显示一个页面,宽度都是1024像素的,那差别在什么地方呢?——就在于new iPad每个像素点实际上有4倍的普通像素点,如下示意(© smashingmagazine): 我们使用CSS设置的像素值(px)属

移动端 rem字体的使用demo

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />

pc端字体大小自适应几种方法

$(window).resize(function ()// 绑定到窗口的这个事件中 { var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值 var wH = window.innerHeight;// 当前窗口的高度 var wW = window.innerWidth;// 当前窗口的宽度 var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值 $('html').css('fo

react +webpack 配置px2rem

项目背景需要适配ipad 以及手机端,这时候当然要告别刀耕火种时代啦(自己算rem),因为已经有成熟的工具啦,即px2rem(https://www.npmjs.com/package/px2rem) 配合amfe-flexible(https://www.npmjs.com/package/amfe-flexible) 项目使用的是react+webpack,yarn安装好上述两个依赖文件以后,首先在index.js文件中引入amfe-flexible,代码如下: 重点是: import 'a

移动端rem适配布局

dome如下: <!doctype html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>移动

手机布局rem的使用(rem)

最后一堆代码是举例的全码. 一直接<head>标签里套用以下,其他都不用 <script> document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*100 + "px"; window.addEventListener("resize",function(){ document.documentElement.style.fon

动态rem解决移动前端适配

背景移动前端适配一直困扰很多人,我自己也是从最初的媒体查询,到后来的百分比,再到padding-top这种奇巧淫技,再到css3新单位vw这种过渡转变但这些都或多或少会有些问题,直到使用了动态rem 才真正不再在适配这个问题上发愁只因为叫动态rem 是因为他是真正意义上随着屏幕的大小来变化的. rem rem官方解释是 font size of the root element 字面意思就是根元素的font-size值也就是rem是相对于元素的如下代码 <html> <met

移动端自适应个人理解与收集——rem

rem——更好的适配移动端.这个单位我一直想弄个究竟,今天终于看了个差不多.看了很多的博客.心中总算有自己的想法.(还有vh,vw这里我这个小白还没有弄明白就先不写了.) 1.rem可以在html,body下设置font-size的大小,然后根据根元素的大小来进行兑换.eg:根元素大小设置为:font-size:100px:有一个div宽度为50px,这样就可以写成——width:0.5rem. 2.一般移动端的设计图为640px/750px 因为手机额dpr为2.只有苹果的plus为3,并且

用rem实现h5页面的编写

一静态页面的布局将这段代码加到script中 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clien

vue 自动px单位自动转换rem

vue 适配移动端假设设计图是375 第一步安装 lib-flexible npm i lib-flexible --save 第二步安装 px2rem-loader npm install px2rem-loader --save-dev 第三步引入lib-flexible import 'lib-flexible/flexible' 第四步最重要的一步配置utils文件 const px2remLoader = { loader: 'px2rem-loader', optio

css3中单位rem与.less结合布局

rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注.这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素. 通常的,我们把html的font-size设置成0.625%;因为浏览器默认的字体大小是16px,所以font-size:0.625也就相当于16px*0.625=10px;往后我们要设置字体大小的时候,就可以用rem了.例如font-size:1.2rem; 就相当于 font-size:12px

apicloud地图、即时通讯、人脸识别登录、以及平时踩过得坑

apicloud技术浅谈导语 apicloud 的学习也有一段时间了,这是我个人的一些经验,和踩过的坑,希望对大家能有一些帮助. apicloud的知识准备 apicloud 是一个用原生的思想搭建包含window.frame.widget 的框架,内容用html.css去布局,js进行数据交互;所以首先要熟悉web三件套,html+css+js;因为是移动端,建议大家采用rem布局或者是flex布局进行屏幕适应. css布局(简单介绍rem和flex) rem是根据html的font-siz

适配手机端rpx像素

react+ant-mobile+lib-flexible构建移动端项目适应设计图尺寸(750)

使用lib-flexible在react中先安装 npm install lib-flexible --save 因为插件使用的是rem适配,所以安装两个插件 npm install postcss-px2rem --save npm install postcss-px2rem-exclude --save 然后在配置文件webpack.config.js中引入插件 const px2rem = require('postcss-px2rem-exclude'); 之后注入,这里的设置是ant

从设计图到CSS：rem+viewport+媒体查询+Sass

根据UI图对移动端的h5页面做样式重构,是前端工程师的本职工作,看似简单,不过想做好却并不容易.下面总结一下其中要点. rem rem是一种相对长度单位,参考的基准是<html>标签定义的font-size.比如: html { font-size: 16px; } .intro { font-size: 1.2rem; margin-top: 0.2rem; } 那么实际效果就是: .intro { font-size: 16px * 1.2rem = 19.2px; margin-top:

h5设计图尺寸

640 标准的话设计图: 640*1136 body,html 背景图的话需要640*1008的这样才能整屏刚刚好 750 标准的话设计图: 750*1334 body,html背景图的话,750*1181的,这样才能整屏刚刚好

【转载】Vue项目自动转换 px 为 rem，高保真还原设计图

前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配置后,在开发中可以直接使用设计图的尺寸开发,项目为我们自动编译,转换成rem. 技术栈 vue-cli:使用脚手架工具创建项目. postcss-pxtorem:转换px为rem的插件. 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的,所以通过设置根节点的字体大

Vue项目自动转换 px 为 rem，高保真还原设计图

技术栈 vue-cli:使用脚手架工具创建项目. postcss-pxtorem:转换px为rem的插件. 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的,所以通过设置根节点的字体大小可以动态的改变rem的大小. 原理网上有很多文章分享,这里不具体解释. 1.创建rem.js文件很多人写这种小工具文件会习惯性的加上闭包,这个其实是没有必要的.ES6中每个文件都是单独的一个模块. // 基准大小 const baseSize = 32 // 设置 rem 函

750的设计图html除以2

热门专题