rem适应pc和移动端

2024-10-17

pc端与移动端适配解决方案之rem

使用方式: 在html页面开头,引入下面的原生js代码 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; ){ d

如何使用蓝湖设计稿同时适配PC及移动端

如何使用蓝湖设计稿同时适配PC及移动端项目需求: 一套代码同时适配PC及移动端方案: pc端采用px布局,移动端采用rem布局,通过媒体查询(media query)切换坑: 尝试过使用postcss-pxtorem来自动将px转换rem, 只能满足移动端,无法同时适配PC及移动端,感觉PC端还是使用固定像素px来布局好一点 PC端设计稿尺寸1920*1080 为了设备不同分辨率的屏幕,可选择将设计稿宽度设置为1440 采用固定尺寸,固定字体,伸缩布局如果是官网类的网站,采用固定宽度(

用react开发一个新闻列表网站（PC和移动端）

最近在学习react,试着做了一个新闻类的网站,结合ant design框架, 并且可以同时在PC和移动端运行: 主要包含登录和注册组件.头部和脚部组件.新闻块类组件.详情页组件.评论和收藏组件等: 数据交互使用的是fetch,简洁好用,上手快: 代码在github上: https://github.com/yang302/news 有什么不懂的可以评论留言或者私信! 希望看后给个star,谢谢!

JS判断PC和移动端设备

1.方法一 function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var flag = true; for (var v = 0; v < Agents.l

前端分辨pc和移动端导入不同css

通过navigator获取浏览器,根据浏览器的不同判断出pc和移动端然后设置不同的css 分辨不同屏幕导入不同的css文件: function loadCSS() { if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|wOSBrowser|BrowserNG|WebOS)/i))) { document.write('<link href="shouji.css" rel=&quo

判断PC机大小端

判断PC机大小端 #include<stdio.h> #include<stdlib.h> int main() { short a = 0x0102; char *p = (char*)(&a); //低字节存储在低地址 && *(p + ) == ) printf("小端\n"); //高字节存储在低地址 && *(p + ) == ) printf("大端\n"); ; }

js判断是pc还是移动端

//判断pc还是移动端 var isM = function () { var ua = navigator.userAgent; /* navigator.userAgent 浏览器发送的用户代理标题 */ if (ua.indexOf('Android') > -1 || ua.indexOf('iPhone') > -1 || ua.indexOf('iPod') > -1 || ua.indexOf('Symbian') > -1){ return true; }else{

一个 VUE 组件：实现子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）

介绍我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚动完成后,不触发父元素的滚动,比如 modal.侧边栏等等. 深入研究-webkit-overflow-scrolling:touch及ios滚动详细文档 & 例子 Document & Demo vue-scroll-lock 一个 VUE 组件:子元素 scroll 父元素容器不跟随滚

把图片画到画布上，适应PC和移动端

画一张图片到画布上 <canvas id="myCanvas" width="1000px" height="200px" >您的浏览器不支持canvas标签.</canvas> var canvas = document.getElementById("myCanvas"); //获取画笔 var ctx=canvas.getContext('2d'); //声明Image对象 var img=new

使用rem配置PC端自适应大屏

效果如下使得大屏不论在什么宽高比例依然能展示全部数据安装 npm install -S postcss-pxtorem rem配置思路原先的rem函数是能解决大部分的问题的,如果展示不全,也可以用滚动条. 但是大屏展示又不能使用滚动条,又必须展示全部的内容,这个时候就需要改变原来的计算方式,需要根据屏幕的实际高度来计算对应的屏幕宽度 1. 配置rem.js文件 rem.js可以放在src文件夹下,我是放在src下的utils文件夹中初始的rem配置 // 设置 rem 函数 functi

rem布局计算（移动端，pc端有兼容性）

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <script> 5 function rootREM() { 6 var W = document.documentElement.clientWidth; 7 W = (W <= 640) ? W : 640; 8 document.documentElement.style.fontSize = W / 10 + 'px'; 9 d

浅谈pc和移动端的响应式

身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: 1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的. 自适应是最早出现的,后面才有了响应式.响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局. 如下图所示,对于同一个页面(图中的Html),如果用响应式布局来处理的话,用不同设备(电脑.平板.手机)去访问此页面,最后看到的布局和内容有很大不同. 而如果用自适应布局去处理的话,那不管访问设备如何的

响应式布局rem、rem方法封装、移动端响应式布局

相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度300像素需要的样式后面移动端业务兴起后做的响应式布局是基于手机各个型号以及各种分辨率的响应式这个时候用的就是rem布局,也是最简单的布局直接用rem写是不行的,这个时候就需要借助js function fontRem() { var bodyWidth = document.getElement

MVC下判断PC和移动端

MVC下的PC端和移动端,其实没区别,写法都一样,只是有两点才改变了它们第一点:就是单击这个页面任何地方的时候判断是移动端还是客户端: 第二点:新建手机端区域Areas(简单来说:Areas就相当于小的一个运行机制也有控制器-视图-和路由地址),Moble(手机端存放的地方) :MVC运行的机制简单来说就是- 控制器-主页面-是否模板页-返回单击的页面 :关键点就在这个模板页里面(_layout)以及自带的js, :当我们运行到了(_layout)这里的时候就要判断是否为PC还是手机端,别问我

手把手教你做一个原生js拖动滑块【兼容PC和移动端】

废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代PC端的"mouse"事件. 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 tou

同域名下PC与移动端自动识别跳转

输入相同域名,在pc端和移动端会出现不同的页面效果,一种是用栅格系统实现自适应,更多的是设计两套不同的模板和两个二级域名或者一个主域名和一个二级域名(就是有区别就可以了); js代码判断浏览器的用户代理头类别从而实现不同跳转 <script type="text/javascript"> (function(){ var ua = window.navigator.userAgent.toLowerCase(); if (!(/Android|webOS|iPhone|iP

在pc游览器端模拟移动端幻灯片

用简单的思路写了下pc端模拟web端的图片滑动效果... 效果卡,bug多,完毕,继续学习c3方法写这个,iscroll就是可以模拟这种效果,还在学习中,难点<触点判断> 代码一份 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Demo</title> <link rel="stylesheet" hre

PC和移动端浏览器同步测试工具Browsersync使用介绍

在移动端网页开发中,总是因为不方便调试,导致各种问题不容易被发现.但是现在有了Browsersync,一切都解决了. 不熟悉的同学可以看看Browsersync的官方网站Browsersync中文网. 五分钟快速入门 1.使用Browsersync前需要安装node.js.详细的安装过程可参见windows 下安装nodejs 2.安装Browsersync.打开一个终端窗口,运行以下命令:npm install -g browser-sync 3.启动 BrowserSync. 如果您想要监听

前端判断用户请求是PC还是移动端

链接:https://www.zhihu.com/question/20004700/answer/13678113 第一步先在服务器端使用User Agent判断,先匹配出移动设备,这一步可以统计User Agent列表(可通过网站访问日志获取或者使用自己的设备收集),写出匹配设备的正则表达式(比如iPhone/Touch系列的匹配规则是/iPhone OS/i,如果要适配系统版本号,规则会更复杂),根据匹配结果做对应的网站版本输出. 需要注意的是在智能手机在移动CMWAP接入方式下User-

rem测试用实现移动端自适应页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

如何使用fiddler抓取https请求（PC和移动端）

最近做一个抓取移动端app接口,并执行评论,收藏的接口功能测试.怎么搞/(ㄒoㄒ)/~~ 按照老思路试一试,第一步还是要用fiddler来帮忙获取接口信息! 一.基本的抓取http请求设置: 1.cmd/ipconfig获取本机ip地址 2.手机开启wifi,设置代理,服务器为:本机ip地址,端口号:8888 3.fiddler设置允许远程连接(满大街都是,自己搜) 4.打开app,点击操作,抓包! oh,shit! 竟然抓不到,什么鬼! 仔细一想我的这里基本都是https连接,无奈,百度,重

rem适应pc和移动端

热门专题