前端web页面的移动端、pc端适配方案

最新推荐文章于 2024-10-15 17:01:40 发布
最新推荐文章于 2024-10-15 17:01:40 发布
阅读量1k 收藏 10
点赞数 8
文章标签： 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/vmanas_/article/details/135822112
版权
本文介绍了如何通过主域名的请求来源和Nginx层的设备判断来实现页面适配，同时提及了使用userAgent进行浏览器类型的识别以达到适配效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、访问主域名根据请求来源判断分发到不同的适配代码中，设备判断一般情况下是nginx那层做判断。

2、页面根据userAgent进行浏览器判断设备，已达到适配效果。

Steven Hank
关注
前端笔记 1 移动端 pc端 适配
qq_43594321的博客
09-09 416
1-postcss-px-to-viewport https://www.cnblogs.com/zhangnan35/p/12682925.html 使用： cnpm i postcss-px-to-viewport -D 在项目根目录下添加.postcssrc.js文件 添加如下配置： module.exports = { plugins: { autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等 "postcss-px-to-
vue项目移动端、PC端适配方案
weixin_59519449的博客
03-24 7908
目录 vue项目移动端、PC端适配方案 一、第一步先安装 flexible和 postcss-px2rem（命令行安装） 二、引入lib-flexible 三、修改lib-flexible源码 四、配置postcss-px2rem 五、注意事项 vue项目移动端、PC端适配方案 vue项目移动端、pc端适配方案 lib-flexible 根据屏幕宽度，自动设置html的font-size postcss-px2rem 自动将px单位转换成rem 一、第一步先安装 flexible
移动端的适配 rem 适配
qq_48235154的博客
12-17 961
移动端的适配 rem 适配
响应式web-PC端web与移动端web（H5）兼容适配 选型方案
LlanyW的专栏
08-26 7524
项目需要，公司已经有一套PC端web，需要做一套手机端浏览器可用的，但是又想兼容pc端，适配的web项目。以下是查阅到响应布局现成的开源模版。
前端扩展知识：pc端、手机端适配基本知识
weixin_45031595的博客
02-07 6798
前端pc端、手机端适配问题 一个项目如何做到手机、电脑共用的方式 1、第一种方式：响应式布局（栅格布局），即通过媒体查询控制css样式，从而实现一套代码手机、电脑共享。一般而言，手机、电脑共享样式，其布局样式必须单调简单，因此一般是企业宣传网站使用。微软官网就是典型的响应式网站。 2、第二种方式：实际上是手机端、电脑端是分开的两套代码，只是通过获取设备信息运行相应的代码。如京东商城这样的功能强大的...
「移动端」Web页面适配(1)
2301_82243603的博客
05-01 1028
移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。二、移动适配方案常见的移动适配方案有以下几种：viewport盒模型flexrem。
前端一套代码多端通用，pc端、移动端适配方案
最新发布
qq_45751819的博客
10-15 2560
因为lib-flexible主要用于手机自适应，当屏幕尺寸大于540px时，它设置html的font-size固定为54px，并不能根据屏幕尺寸调整<html>标签的font-size的大小，所以这里需要修改lib-flexible源码。超过1200px，设置左右内边距，此处提一点，如果你想固定页面的宽度，不随页面变化，那么需要写行内样式，因为lib-flexible插件的原因，页面内容宽度会随着页面宽度变化，但是行内样式不受影响。另外这是我建好的一个架子demo，有需要的自取。项目准备：需要2个插件。
前端移动端适配 - 媒体查询适配方案
超逸の学习技术博客
02-10 3729
工作中难免会有写静态页面的需求，有时候移动端适配真的是做的心累，如果自己新做一个页面倒还好，整体布局会按照自己习惯来，但有时候不得不修改别人的代码，尤其是别人没适配好的代码，找样式以及命名规范等问题够折磨一整天了。
移动端Web页面适配方案（整理版）
weixin_57550930的博客
10-22 4681
主要分为：【百分比|rem|vw/vh|响应式设计】 介绍： 移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。 早期网页设计采用静态布局，通过<meta>标签中的applicable-device应用设备标识识别移动设备，即<meta name = 'applicable-device' content = 'mobile'>，在<meta&g
10几个纯静态HTML小游戏，适配移动端PC端
01-22
这些资料构成了一组纯静态HTML小游戏集合，适合在移动端和PC端运行，无需任何特定的运行环境或服务器支持。这体现了HTML技术的强大之处，它能够跨平台地展示内容，为用户提供便捷的游戏体验。 HTML（HyperText ...
[前端]Web前端-移动端开发知识点及常用适配方案
deathz15的博客
12-01 2199
文章目录一、前端开发常用单位1.像素(Pixel)2.百分比3.em4.rem5.vw(Viewport Width)和vh(Viewport Height)二、视口三、设备像素和CSS像素1.什么是设备像素和CSS像素?2.如何解决设备像素和CSS像素不一样的问题?3.获取设备像素比DPR(Device Pixel Ratio)四、常用移动端适配方案1.通过media媒体查询2.通过media媒体查询+rem3.通过JS+rem4移动端开发适配方案之终极方案相关文献 一、前端开发常用单位 1.像素(Pix
前端开发-移动端的适配如何实现
2202_75324165的博客
09-06 4331
此时可以使用flexible.js，这是手机淘宝团队开发出的一个用来适配移动端的js框架，核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size值。开发中，vw和vh不要混用，要么全用vw 要么全用vh，vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。Flex布局/弹性布局： 是一种浏览器提倡的布局模型 ，布局网页更简单、灵活 ，避免浮动脱标的问题，目前比较流行的一种方式。vw单位的尺寸 = px单位vh数值 / ( 1/100 视口宽度 )
移动端web页面适配
miccyf的博客
05-06 356
px、em、rem px: 像素（px）是相对于显示器屏幕分辨率而言的，px是逻辑像素，也叫css像素。 如：10个汉字要撑满整行，行内没有剩余空间。代码如下： <style> *{margin: 0px;padding: 0px;} /* 消除默认的margin和padding值 */ @media only screen and (width:320px) { div{font-size: 32px;} } @media only screen and (wi
前端之PC及移动端页面适配方法
热门推荐
tianduantoutiao的博客
05-31 1万+
PC及移动端页面适配方法 设备屏幕有多种不同的分辨率，页面适配方案有如下几种： 1、全适配：流体布局+响应式布局 2、移动端适配： 流体布局+少量响应式 基于rem的布局 弹性盒模型 流体布局 流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置...
一篇文章搞懂，vue中pc端与移动端适配解决方案（亲测有效）
Web面试那些事儿的博客
10-11 9775
当涉及屏幕适配方案时，我们常常被众多选择所困扰，如postcss-pxtorem、postcss-px2rem、px2rem-loader、postcss-plugin-px2rem等。然而，在实际测试中，由于不同的Vue和Webpack版本，很多这些方式已经无法使用，反而带来了更多麻烦。为了尽快解决问题，我们应该始终以解决问题为导向，首先采用那些已经获得验证并能产生效果的方法。对于上述列举的方案，虽然没有一一测试过，但我们需要明确的是，抓住解决问题的关键。
关于前端代码移动端的适配方案
qingwan_91的博客
06-01 2960
前端代码在移动端的适配方案
Web前端开发 --》 如何实现页面同时在移动端和pc端的兼容问题
weixin_30876945的博客
06-26 2359
很简单，只需要在html文件中对你引入的css进行一个类似于媒体查询的操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...
移动web适配
weixin_43914599的博客
11-17 1126
移动适配、rem、less
「移动端」Web页面适配
前端人的博客
08-23 1490
一、什么是移动端适配 移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。 由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。 二、移动适配方案 常见的移动适配方案有以下几种： viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机端需要照顾 PC 端，如果不设置 vie
移动端与PC端适配的前端开发资源包
该压缩文件包含了面向移动端与电脑端的网站开发资源，重点在于提供一套完整的网页模板，其中包括了HTML代码、前端JavaScript效果、H5模板以及自适应的CSS源码和UI组件。这些资源的设计目的主要是为了构建响应式网站...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值