html和css布局怎么适配不同的分辨率

用html和css布局的页面,自己的电脑是1365 736的分辨率,放在1920 1080分辨率的屏幕上排版就乱了,这应该怎么解决

10个回答

1.使用百分比 相对位置
2.先获取分辨率 然后对应的设置参数

自适应响应式布局,设定不同物理分辨率的不同的布局
这个可能需要你在PS上演练下
于无声处听惊雷吗

根据屏幕尺寸写媒体查询自适应或者做成响应式http://www.w3school.com.cn/tags/att_style_media.asp

用百分比定义宽度,最大100% 这样页面布局后 不同分辨率就会按百分比进行缩放扩大。不影响布局,

自适应布局,只要在设置的时候用百分比就问题不大

自适应布局一般都用百分比来控制。你可以给你的网页设定一个最小的尺寸,然后让他居中显示

使用百分比就可以了。看描述楼主应该是用的px,所以分辨了一变很多样式就乱了,非要用px的话可以获取当前屏幕的宽高,然后在按照比例设置就可以了

两个步骤:
1、@media screen and (max-width:1366px)和@media screen and (max-width:1920px)通过css样式覆盖
2、设置百分比

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Vue项目实现不同分辨率适配最佳方法

第一次做网页程序,最烦这个页面适配,不清楚到底用哪种方法比较好,(比如1920x1080下看起来ok,但是换成别的分辨率就不太对了),还有就是手机上显示又应该怎么做呢,

如何根据屏幕分辨率的不同 ,调用不同的css样式?

我的代码如下 ``` function center(){ //判断显示器分辨率 var winWidth = document.documentElement.clientWidth; var winHeight = document.documentElement.clientHeight; if((winWidth==1920)&&(winHeight==985)){ $("#css").attr("href","page/common/css/logo_style2.css"); }else if((winWidth==1366)&&(winHeight==673)){ $("#css").attr("href","page/common/css/logo_style1.css"); } } ``` 我在那个路径下,也写了两个css,为什么我换显示器时,这个不起作用,永远是开头定义的那个css样式。 ``` <title>根据分辨率调整样式大小</title> <link href="page/common/css/logo_style1.css" type=text/css rel=stylesheet /> ``` 请问怎么解决?

html布局为了适应不同分辨率的显示器,用什么布局好?

一般都使用百分比,什么时候使用px,高度都是子元素撑起来的吗

前端PC端适配,怎么在不同的分辨率完美实现图纸

# 设计图纸给的是1336*768的,而我的电脑是1920*1080的,想要我的电脑完美的显示出来,怎么做适配??非常急,只做pc端适配,详细点,谢谢(我自己有做rem适配,做完发现高度不够)

css不同分辨率下,网页变形问题

求解决方案

css定位 怎样不受屏幕分辨率变动 谢谢

用css定位图片,一改屏幕分辨率位置就变了, 怎样能做一个不受屏幕分辨率影响定位啊 大家帮忙! img.pos_left { position: relative; top:100px; left: 28% } 给点提示 谢谢

CSS样式布局问题,屏幕适配

![图片说明](https://img-ask.csdn.net/upload/201708/25/1503639771_590350.png) 请教一下各位,请问上图中这种样式,用虚线把三个div连接起来,应该怎么实现比较好?要考虑不同屏幕适配的问题,我大致的实现步骤是三个li,间距用的固定像素的margin,虚线使用div的border实现的,这样总觉得适配做的不好,大家有什么更好的办法吗?我的代码大概如下: ``` <ul class="l-create-step"> <li class="l-step-active"> <div class="l-step-active-div">1</div> <p>Search application</p> </li> <li> <div>2</div> <p>Setting parameters</p> </li> <li> <div>3</div> <p>Start campaign</p> </li> <div class="l-step_active l-dashed"></div> <div class="l-dashed"></div> </ul> ``` ``` ul{ display: block; margin: 60px 0 82px; position: relative; overflow: hidden; li{list-style: none; display: inline-block; div{ width: 60px; .lineheight(60px,60px); text-align:center; background: url('l_sprites.png') -10px -10px; font-size: 30px; color: @white; margin: 0 auto 14px; position: relative; z-index: 100; background-color: @white} p{font-size: 16px;color: @gray;} } li.l-step-active{ div{background: url('l_sprites.png') -90px -10px;background-color: @white;} p{color: #6dd3ff;} } li:nth-child(2){margin: 0 135px;} } .l-dashed{border-top:1px dashed @gray;height: 1px;position: absolute;top: 30px;width: 70%;left: 50%;margin-left: -35%;z-index: 1;} .l-step_active{border-top:1px dashed @active-color;height: 1px;position: absolute;top: 30px;width: 35%;left: 50%;margin-left: -35%;z-index: 2;} ``` 请大家指教,最好有代码

网页浏览器与分辨率适配(急)

现在急需要一个解决方案...... 让一个网站的页面对电脑不同的分配率都适配...... 同时横向不能出现滚动条,纵向也不能有滚动条...... 想了一下..安页面控件的百分比来做...... 仍然会有一些空白...... 请问这个问题怎么解决... [b]问题补充:[/b] 我的意思是分配率适配 比如800 * 600 1024 * 768 等 [b]问题补充:[/b] 还有其他办法吗? [b]问题补充:[/b] 可不可以根据分辨率之间的差值和当前页面的控件数来解决呢 (我不是搞美工的,所以很菜。) [b]问题补充:[/b] 可不可以根据分辨率之间的差值和当前页面的控件数来解决呢 (我不是搞页面的,所以很菜。)

html+css布局问题,求教大神

大div包含5个小div,如何让大div左右没有内边距,小div间有边距,且平分大div?

PC端页面如何做到页面内容自适应不同分辨率满屏显示,而不出现滚动条和内容不被隐藏?

比如: 在1280*720分辨率下页面内容能够满屏显示 ,换个1280*800、1280*768、1440*768、1440*900等不同分辨率在又改如何做到内容满屏显示,不要有内容溢出隐藏和上下左右空白出现滚动条的问题,必须要内容占满屏显示。如何做到求大神指教?

在html相对布局和绝对布局

我在一个html的body中创建了两个div,第一个默认布局,第二个设置了绝对布局,为什么第二个div在第一个下面,不是绝对定位元素找祖先中设置了position:relative或者absolute的元素为参照,没找到以body参照,为什么不是第二个div把第一个div覆盖 <!DOCTYPE HTML> <html> <head> <title>Title</title> <style> .main{width:400px;height:400px;background:red;} .main .left{width:100px;height:100px; background:yellow;float:left;} .main .right{width:100px;height:100px; background:blue;float:right;} .test{width:400px;height:400px;background:green;position:absolute;} </style> </head> <body> <div class="main"> <div class="left"></div> <div class="right"></div> </div> <div class="main1"></div> <div class="test"></div> </body> </html>

为什么我的div+css布局做不到和他的一样?求解谢谢啦

想练习一个div布局,随便找了网截图开始做,下面是原图 ![](http://pic1.zhimg.com/1f49d6254d7c5eb92472ab09208bcb64_b.png) 然后我切的图: ![](http://pic3.zhimg.com/8c84f815a62eb9c0c1e0ab340bcaa13a_b.png) 做到一半打开网页后却是这样的 ![](http://pic1.zhimg.com/f16381635b293d2061c81c1cdb2d56e8_b.png) 代码是这么写的 ``` <div class="main"> <div class="A1"> <img src="A1-P.jpg"/> <p>联想(Lenovo)Y430p 14英寸<strong>笔记本</strong>电脑(I5-4210M 4G 1TB GTX850M 2G</p> <div class="price"> ¥4649.00 <img class="sale" src="sale.gif"/> </div> </div> </div> 然后下面的是css ``` `*{padding:0; margin:0;} nav{width:100%; height:200px; background:#ccc;} .main{padding:50px 0 50px 30px;} .A1{width:200px; height:269px;} .A1 p{font:12px/18px 微软雅黑; color:#666;} .A1 p strong{color:#f70; margin-bottom:5px;} .A1 .price{height:16px; width:200px; line-height:16px; font-size:12px; color:#ff0000;} .A1 .price .sale{display:block; float:right;}`` ``` 实际打开网页后为什么是那样的 头疼, 为什么人家的文字 和 下面的 "赠" 对的那么整齐 ,我的不行 难道我要用css控制一下文字的间距? 还是调一下"赠的位置",感觉方法都不怎么好. 想得到一种思路,谢谢啦

div+css布局的一个很小问题,求解,谢谢了

``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0; padding:0;} .A{width:950px; height:40px; background:#ccc;} .nav{width:800px; height:20px; background:blue; margin-top:5px;} </style> </head> <body> <div class="A"> <div class="nav"></div> </div> </body> </html> ``` 在我的想象中, 打开浏览器应该是这样的 ![图片说明](https://img-ask.csdn.net/upload/201507/26/1437879538_140305.jpg) 然而,实际上,打开浏览器却是这样的 ![图片说明](https://img-ask.csdn.net/upload/201507/26/1437879850_611959.jpg) 为什么会这样, margin-top为什么不基于他外面的大盒子,而是基于外面显示?

如何测试网页在不同移动设备的各种分辨率下的显示效果?

我想开发在便于移动设备浏览的网页。由于移动设备种类多,分辨率也各不相同。这给调试带来了困难,大家是如何解决这个问题的?

html+css新手,大神们能帮看看这个布局怎么搞么

![图片说明](https://img-ask.csdn.net/upload/201506/08/1433726682_484664.jpg) 如图,这是我网页布局的草稿,具体应该怎么搞不太明白。能帮帮我么

css实现三列布局(不用css3)

![图片说明](https://img-ask.csdn.net/upload/201706/06/1496750685_564132.png) 实现如图,间距都是固定的,但是三列实现自适应效果,即三列随屏幕变宽,都是等比增加,但是中间的间距不变。不用css3的flex,用css2实现。

html5和之前html有什么不同么,还有css3

看到好多招聘信息都是要会html5 html5和之前html有什么不同么?还有css3,和之前有什么区别

怎么用css实现图片中的布局

![图片说明](https://img-ask.csdn.net/upload/201512/04/1449228884_873833.png) 请教, 怎么用css实现图片中的布局, 可以帮忙写一段吗

在EasyUI的基础上通过判断分辨率给导入不同的CSS样式,CSS发生错乱!求大神支招!

本来项目样式是直接写在EasyUI的CSS文件中的,后来需求要求符合各种分辨率,我便将在EasyUI中自己添加的CSS提取出来做成了一个新的CSS文件,通过JS判断条件之后导入指定的CSS文件到页面,没有这样做之前,直接写在EasyUI中的CSS样式没有问题,但是提取出来之后再导入样式就发生了错乱,求大神支招!![这张是EasyUI中的CSS(正常)](https://img-ask.csdn.net/upload/201606/30/1467288556_833312.png)![这张是重新导入的就不正常了](https://img-ask.csdn.net/upload/201606/30/1467288613_715936.png)![图片说明](https://img-ask.csdn.net/upload/201606/30/1467288655_657199.png)![图片说明](https://img-ask.csdn.net/upload/201606/30/1467288643_333904.png) ![图片说明](https://img-ask.csdn.net/upload/201606/30/1467288972_521544.png) ![图片说明](https://img-ask.csdn.net/upload/201606/30/1467288988_735029.png) ![图片说明](https://img-ask.csdn.net/upload/201606/30/1467289002_591881.png) ![图片说明](https://img-ask.csdn.net/upload/201606/30/1467289013_967838.png)

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

外包程序员的幸福生活

今天给你们讲述一个外包程序员的幸福生活。男主是Z哥,不是在外包公司上班的那种,是一名自由职业者,接外包项目自己干。接下来讲的都是真人真事。 先给大家介绍一下男主,Z哥,老程序员,是我十多年前的老同事,技术大牛,当过CTO,也创过业。因为我俩都爱好喝酒、踢球,再加上住的距离不算远,所以一直也断断续续的联系着,我对Z哥的状况也有大概了解。 Z哥几年前创业失败,后来他开始干起了外包,利用自己的技术能...

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

深入剖析Springboot启动原理的底层源码,再也不怕面试官问了!

大家现在应该都对Springboot很熟悉,但是你对他的启动原理了解吗?

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

2020阿里全球数学大赛:3万名高手、4道题、2天2夜未交卷

阿里巴巴全球数学竞赛( Alibaba Global Mathematics Competition)由马云发起,由中国科学技术协会、阿里巴巴基金会、阿里巴巴达摩院共同举办。大赛不设报名门槛,全世界爱好数学的人都可参与,不论是否出身数学专业、是否投身数学研究。 2020年阿里巴巴达摩院邀请北京大学、剑桥大学、浙江大学等高校的顶尖数学教师组建了出题组。中科院院士、美国艺术与科学院院士、北京国际数学...

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

你期望月薪4万,出门右拐,不送,这几个点,你也就是个初级的水平

先来看几个问题通过注解的方式注入依赖对象,介绍一下你知道的几种方式@Autowired和@Resource有何区别说一下@Autowired查找候选者的...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

《Oracle Java SE编程自学与面试指南》最佳学习路线图2020年最新版(进大厂必备)

正确选择比瞎努力更重要!

《Oracle Java SE编程自学与面试指南》最佳学习路线图(2020最新版)

正确选择比瞎努力更重要!

字节跳动面试官竟然问了我JDBC?

轻松等回家通知

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

终于,月薪过5万了!

来看几个问题想不想月薪超过5万?想不想进入公司架构组?想不想成为项目组的负责人?想不想成为spring的高手,超越99%的对手?那么本文内容是你必须要掌握的。本文主要详解bean的生命...

自从喜欢上了B站这12个UP主,我越来越觉得自己是个废柴了!

不怕告诉你,我自从喜欢上了这12个UP主,哔哩哔哩成为了我手机上最耗电的软件,几乎每天都会看,可是吧,看的越多,我就越觉得自己是个废柴,唉,老天不公啊,不信你看看…… 间接性踌躇满志,持续性混吃等死,都是因为你们……但是,自己的学习力在慢慢变强,这是不容忽视的,推荐给你们! 都说B站是个宝,可是有人不会挖啊,没事,今天咱挖好的送你一箩筐,首先啊,我在B站上最喜欢看这个家伙的视频了,为啥 ,咱撇...

立即提问
相关内容推荐