不同分辨率下样式不一样解决办法

最新推荐文章于 2024-04-14 12:00:16 发布
最新推荐文章于 2024-04-14 12:00:16 发布
阅读量2k 收藏
点赞数
分类专栏： css js 文章标签： css css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45326146/article/details/122685256
版权
js 同时被 2 个专栏收录
16 篇文章 0 订阅
订阅专栏
css
9 篇文章 1 订阅
订阅专栏

方法一：针对不同分辨率用户设置不同的css（不推荐）
即针对不同的分辨率，开发不同的css样式，在界面加载时，先判断用户屏幕分辨率，在应用相应的css。相比较，这种方法最复杂，而且如果系统面向大众，需要作很多不同的css

方法二：根据分辨率的宽度，计算当前屏幕的分辨率宽与设计图宽一个比例值
例如
设计图宽 1366
实际屏幕 1920 （获取屏幕宽度 ：document.body.clientWidth）
比例值 1920/1366
设计图按钮左margin：20px
则：实际按钮左margin： 20px × 1920/1366

慕慕慕白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
因分辨率变化html页面布局跳动_前端响应式布局解决方案
weixin_39788740的博客
12-04 646
移动端页面布局的问题，在当今前端是比较常见的话题，因为不同终端设备的分辨率，dpr等不同，导致前端无法用单一的px值来将页面的元素固定，需要通过技术手段在不同的环境下进行适配，来保证页面最佳的可读性，这里将会总结一些常见的方案。百分比布局这是最早的布局解决方案，解决成本低，高效。将页面元素的宽度以百分比来进行设置，高度不变。缺点也显而易见，在例如ipad横屏下，页面被拉伸很多，造成视觉体验较差。M...
不同分辨率的不同样式
qq_37807767的博客
07-14 440
pc不同分辨率的不同样式需求实现 需求 实际开发中，分辨率不同的情况下需要不同的样式等等…但是组件库在很多情况下一些细节并不能实现，这个时候使用媒体查询也是不错的选择 实现 比如在不同分辨率下实现不同的字体大小： <!DOCTYPE html> <html> <head> <!-- 手机端的时候需要替换为这句话 <meta name="viewport" content="width=device-width,
PC端页面适应不同的分辨率的方法
量变是质变的一小步
10-26 6161
这个时候，我们只需要在我们的HTML页面的标签中，使用js，根据不同的电脑分辨率，加载不同的css样式表。因为我在公司的电脑的分辨率是1440，所以一开始我实在1440分辨率下写得css样式表，然后在这个基础之上，去调整其他的分辨率。不仅如此，有的时候项目的要求不高，没有比较1:1高度还原设计稿，那么这个时候，我们在1440分辨率下的样式表，在1280分辨率下也是适用的，这个时候，我们的工作量又进一步减少。以上的方法的思路大同小异，根据我自己的经历，给大家提出一些小的建议。
CSS根据屏幕分辨率自动调整样式
最新发布
weixin_46266464的博客
04-14 867
CSS 根据屏幕分辨率自适应样式的核心技术就是响应式设计（Responsive Design），主要依赖于CSS3的媒体查询（Media Queries）。媒体查询允许开发者根据设备的视窗宽度、高度、方向等特性来应用不同的CSS样式规则。在这个例子中，当屏幕宽度小于等于600px时，浏览器会加载并应用 styles-mobile.css；当屏幕宽度大于600px时，则加载并应用 styles-desktop.css。这样，当屏幕分辨率改变时，CSS 将自动应用最适合当前屏幕尺寸的样式，从而实现响应式设计。
根据显示器不同分辨率调用不同的css样式
Jikycc的专栏
04-21 1677
<br /><br />根据显示器不同分辨率调用不同的css样式,实现网页能更好地根据对方的显示器分辩率调整自己,达到最理想的显示效果。<br />其中的主要工作原理是用javascript脚本判断用户浏览器类型和分辨率，然后调用相应的css样式表。下面是相应的代码。<br /><SCRIPT LANGUAGE="JavaScript"><br /><!--<br />if (window.navigator.userAgent.indexOf("MSIE")>=1)<br /><br />{<br />v
不同分辨率导致页面样式效果不一
weixin_42681190的博客
07-13 951
百分比 换成 px div 高度设置百分比 发现在A电脑看样式合适，在B电脑看过短； 后百分比 调为 固定px 发现可以。
页面在不同屏幕分辨率下存在的问题及解决办法
11-12 921
pc端前端页面适应不同分辨率的问题
热门推荐
qq_33358062的博客
08-04 3万+
if(window.screen.width>1427&&window.screen.width    document.write("");   }   if(window.screen.width    document.write("");   }   这里记住将此必须写在head中，这样样式才会先被加载出来，如果将此写在自己定义的js文件中，js文件写在body后面
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
12-12
最近看一个网站，发现显示器不同的分辨率，样式文件调用的也不一样，今天写了一个例子研究一下， 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8″> <title>无标题文档...
如何让网页适应不同分辨率
12-20
由于每个电脑的分辨率都不同，开发人员需要找到一种方法来让网站适应不同分辨率，以确保网站在不同的屏幕分辨率下都可以正确地显示。 解决思路： 在不同的分辨率下看到的网页版面格式有很大差别，甚至有可能错位。...
公告上下滚动
10-27
4. **响应式设计**：由于提到适用于移动端，所以设计需要考虑不同屏幕尺寸和分辨率，使用媒体查询（media queries）确保在不同设备上的良好展示。 5. **优化性能**：为了保证在移动设备上的流畅运行，可能需要优化...
css 字体设置(不同浏览器设置效果)
09-25
这些单位在不同的媒体和分辨率环境下可能会导致不精确的显示。`px`（像素）通常被认为是最方便的单位，但它在Internet Explorer中不允许用户缩放字体大小。 相对大小主要通过`em`、`%`和`ex`来设定。`em`是相对于父...
【STM32】stm32f407 + DS18B20 碰出不一样的火花.zip
06-06
此外，DS18B20的初始化和数据读取也需要遵循特定的时序，这对于编程者来说是一个挑战，但通过查阅官方的数据手册和参考代码可以很好地解决这个问题。 在项目中，STM32F407会定期向DS18B20发送读取温度的命令，获取...
html页面根据屏幕大小用不同样式,css如何设置不同分辨率下的样式？
weixin_31354669的博客
06-03 2432
css如何设置不同分辨率下的样式？下面本篇文章给大家介绍一下CSS根据不同的分辨率显示不同样式的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。css如何设置不同分辨率下的样式？在写响应式网页的时候，我们需要网页有几种显示方式，我们可以用CSS实现这个功能使用CSS提供的媒体查询，我们可以根据屏幕分辨率来使用相应的CSS样式@media 媒体查询@media 媒体查询选择性加...
pc不同分辨率引入不同css文件
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-21 392
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1280px) and (max-device-width: 1600px)" href="css1280-1600.css" /> <!-- 不同css引入不同css文件，在1599下引入 --> <link rel="stylesheet" type="text/css" media="screen and (min-device-w
CSS中关于不同分辨率下的样式设置注意事项
hl_java的专栏
01-12 2034
需要注意的有2点 1.头部 html> head> title>任务详情title> meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 2.具体样式，当屏幕分辨率 @media screen and (max-width: 1360px
解决电脑分辨率及缩放导致页面变形的问题
m0_47668952的博客
02-06 911
解决电脑分辨率及缩放导致页面变形的问题
HTML+CSS项目实践八：同一个HTML页面，在不同电脑上的显示效果不一样！解决HTML页面针对不同分辨率的问题
caimaomaocai的博客
07-17 1万+
版权声明：王迪 https://blog.csdn.net/dnruanjian/article/details/85336448 表象问题：同一个HTML页面，在不同电脑上的显示效果不一样。（样式错位等） 举例说明：当电脑分辨率不同时，第二张图片的样式无法完全展示。 问题分析：由于电脑屏幕分辨率不同，像素密度不同，视觉上会有差异，甚至差异很大。 参考资料：百度...
web前端面试题附答案029-不同分辨率展现不同大小的图片（这4种方案你能想到几种？）
xingyu_qie的专栏
10-08 1292
通过上图，大概就对前端的Img理解个差不多，一图胜过千言万语。而这道题所要说的就是怎么让不同分辨率下，一个img标签元素可以展示不同大小的图片。
html 使用绝对定位在不同分辨率下位置不同
06-10
使用绝对定位的元素不随着浏览器窗口或父元素的大小改变而自动调整位置，因此在不同的分辨率下，可能会导致元素位置不同的问题。要解决这个问题，可以使用以下方法： 1. 使用相对单位而不是绝对单位 在使用绝对...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值