自适应分辨率_react 分辨率自适应 - CSDN
精华内容
参与话题
  • 首先分辨率是什么? 打个比方。分辨率为1366×768时,就是指在等离子屏幕的横向上划分了1366 个像素点,竖向上划分了 768 个像素点。所以在同一个屏幕上设置分辨率越高,同一个图片就显得越小越清晰,因为图片的...

    首先分辨率是什么?

    打个比方。分辨率为1366×768时,就是指在等离子屏幕的横向上划分了1366 个像素点,竖向上划分了 768 个像素点。所以在同一个屏幕上设置分辨率越高,同一个图片就显得越小越清晰,因为图片的像素是定了的,比如240x240。自己脑补一下,自己的电脑是不是设置分辨率低一点的时候,桌面图标就会变大变模糊呀。1024*768的分辨率是现在比较常见的。

    所以前期设计时就应该考虑不同分辨率的问题,1024的话理论上应该不超过1000px的宽度。写一个宽度小于1000的容器,设置为margin:0 auto(居中);然后把所有内容装到里面去。
    展开全文
  • 如何使网页自适应电脑屏幕分辨率?

    万次阅读 2013-07-05 15:46:52
    在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。  第一种方法:做一个网页解决问题(长了点)  如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的...
    在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。
    

      第一种方法:做一个网页解决问题(长了点)

      如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的网页变得"面目全非",那多令人沮丧!下面我们以网页爱好者的常用工具Dreamweaver(以下简称DW)为例,列出几个网页制作初学者较常见的网页布局问题以及解决方法,希望对初学者们有所帮助。

      一、消除任意缩放浏览器窗口对网页的影响

      一番辛苦做出来的网页,在全屏状态下浏览一切正常。但在改变浏览窗口大小之后,网页就变得"不堪入目"了,这是个很值得注意的问题。

      问题的根源还得从网页的布局说起,在DW中,网页内容的定位一般是通过表格来实现的,解决表格的问题也就成功了大半。

      大家应该注意到,在DW中表格属性面板的高宽设定选择上提供了两种不同类型:百分比和像素值。百分比的使用将会产生前面说到的那个毛病。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比,如在一个表格单元的宽度是600,在它里面嵌入了另外一个表格,表格宽度占表格单元的50%,则这个表格的宽度为300,依此类推,如果在一个表格不是嵌于另一个表格单元中,则其百分比是相对于当时窗口的宽度的。IE浏览器中,随便改动主页窗口的大小时,表格的内容也随之错位、变形,就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。

      自然,解决这个问题的办法就是将表格宽度设置成固定宽度(也就是像素值)。另外如果外层表格已做好固定宽度设置,内层表格也可以适当使用百分比设置。清楚这个原则以后,如果出现类似的问题大家也知道怎么解决。

      二、让网页居中

      说到了窗口大小就会顺着路子想到分辨率的问题,在800×600分辨率下制作的网页在1024×768分辨率的机器上打开,整个网页就会跑到左边;1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧?做起来费时,看起来也费劲。怎么办呢?

      现在大多数网民都还在用800*600的分辨率,所以我们一般可以以此分辨率为主,要想让网页在1024*768时居中,只要在网页原代码的<body>后紧加一句<center>,</body>前加一句</center>就OK了。不过有几个问题这是要注意一下,第一个就是上面说到的百分比的问题,表格、单元格的宽度单位最好要使用像素单位,而不要用百分比。例如width=770。如果你的表格宽度设的是百分比,那么使用大于800×600的像素时,网页就会拉宽,这样网页可能会变形。在<body>中加入leftmargin=0,即<body leftmargin=0>这种情况下,800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。


      <html> 
      <head></head> 
      <body topmargin=0 leftmargin=0> 
      <center> 
        <table cellspacing cellpadding width=760><tr><td></td></tr></table> 
      </center> 
      </body> 
      </html>

     

     三、定义固定大小的文字

      大家都知道,在IE浏览器的功能设置中,有一个可以自由设置窗口内容字体大小的功能,这样由于不同访问者的设置习惯不同,呈现在他们面前的网页有时也会不不相同。比如你可能本来设计时用的是2号字体,结果由于用户对浏览器的额外设定,变的更大了,这时你的网页也可能变得"不堪入目"。虽然不是你的错,但客户是上帝。

      如果使用了网页中的CSS样式表技术,就不会出现上述情况了。使用快捷键"Shift+F11"打开样式表"CSS style"编辑器,在窗口中单击鼠标右键执行"New CSS style..."命令新建一个样式表,然后在给出的列表中选择"类型"选项,定义文字属性参数(一般文字的大小选择12px较为适宜)。完成后选择网页编辑窗中的文本,单击新的样式表名称,可以看到选中的文本发生了变化。预览时试试定义的文本字体尺寸还会不会随浏览器的选择字体大小而改变。

      四、让网页适应不同的浏览器

      浏览器的格局现在是两分天下,一分是IE,另一分是NetScape,在国内Ie有绝对的占有率,在这种情况下我们设计的网页只要兼容它就行了,但NetScape在国外还是有很多人使用,毕竟它是浏览器的元老。

      虽然没有办法做出让所有浏览器都兼容的网站,但只要注意以下几点,做出来的网页在各个浏览器都中能达到比较好的显示效果:

      不要混合使用层和表格排版,如果是父子关系,如层中表格,不在此原则范围内。

      内联式的 CSS 在 Netscape Navigator 中经常会出现问题,使用链式或内嵌式。

      有时需要在空层插入表格或者透明图片,以保证在 Netscape Navigator 里的效果。

      对于只有几个像素宽度或高度的层,改用图片来实现。

      避免使用 W3C 组织不推荐的排版属性,用 CSS 代替。

      第二种方法:做两个适合不同分辨率的页面,一个是800×600,一个是1024×768,在800×600的页面中加入一下代码就可以实现跳转了:
     
      解决分辨率问题在Dreamweaver中没有此项功能,我们只能手动加入一段Javascript代码。首先在change-ie.html或change-nc.html页面代码中的< head>和< /head>中加入以下代码:

       < script language=JavaScript> 
       < !-- 
       function redirectPage(){ 
       var url800x600=〃index-ie.html〃; //定义两个页面,此处假设index-ex.html和1024-ie.html同change-ie.html在同一个目录下 
       var url1024x768=〃1024-ie.html〃; 
       if ((screen.width==800) && (screen.height==600)) //在此处添加screen.width、screen.height的值可以检测更多的分辨率 
       window.location.href= url800x600; 
       else if ((screen.width==1024) && (screen.height==768)) 
       window.location.href=url1024x768; 
       else window.location.href=url800x600; 
       } 
       // --> 
       < /script>

       然后再在< body…>内加入onLoad=〃redirectPage()〃

       最后,同样地,在< body>和< /body>之间加入以下代码来显示网页的工作信息:

       < script language=JavaScript> 
       < !-- 
       var w=screen.width 
       var h=screen.height 
       document.write(〃系统已检测到您的分辨率为:〃); 
       document.write(〃< font size=3 color=red>〃); 
       document.write(w+〃×〃+h); 
       document.write(〃< /font>〃); 
       document.write(〃正在进入页面转换,请稍候…〃); 
       // --> 
       < /script>

     

    判断读者浏览器类型和屏幕分辨率,自动调用不同CSS

    我们在设计网页的时候一个比较头痛的问题是究竟我们的浏览者的分辨率是多少?如果使我们的浏览者能够更好的去浏览到我的网页,这个是我们设计前必须思考的问题。所以Leying在设计网页的时候第一个想的是兼容现在大多数浏览者的屏幕分辨率,这里头有几种最常用的方法:

        1、硬行把网页先用表格框起来,框的分辨率应该是在760-780象素,其余的空间可以给一个背景图或者空白.
        2、用自动缩放的方法也可以实现,这种方法比较古老,而且很简单,这个不多说了;

        3、用自动判断的方法。

        今天,就第三种方法来说说,如何来判断出浏览者的屏幕分辨率,根据不同的分辨率给予读者不同的浏览内容:

        网络上也有一些能自动判断出你的浏览器是什么类型或者什么版本的代码,集成过来。

      一、既判断分辨率,也判断浏览器,使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码。

     
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    if (window.navigator.userAgent.indexOf("MSIE")>=1)
    {
    var IE1024="";
    var IE800="";
    var IE1152="";
    var IEother="";

    ScreenWidth(IE1024,IE800,IE1152,IEother)
    }else{
    if (window.navigator.userAgent.indexOf("Firefox")>=1)
    {
    //如果浏览器为Firefox
    var Firefox1024="";
    var Firefox800="";
    var Firefox1152="";
    var Firefoxother="";

    ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
    }else{
    //如果浏览器为其他
    var Other1024="";
    var Other800="";
    var Other1152="";
    var Otherother="";
    ScreenWidth(Other1024,Other800,Other1152,Otherother)
    }
    }

    function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
    if ((screen.width == 1024) && (screen.height == 768)){
    setActiveStyleSheet(CSS1);
    }else{
    if ((screen.width == 800) && (screen.height == 600)){
    setActiveStyleSheet(CSS2);
    }else{
    if ((screen.width == 1152) && (screen.height == 864)){
    setActiveStyleSheet(CSS3);
    }else{
    setActiveStyleSheet(CSS4);
    }}}
    }

    function setActiveStyleSheet(title){
      document.getElementsByTagName("link")[0].href="style/"+title;
    }
    //-->
    </SCRIPT>


        为了大家明白,这里简单解析一下:

    引用内容 引用内容

    var IE1024="";

    var IE800="";

    var IE1152="";

    var IEother="";


        引号里面分别填写,用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。


     

    var Firefox1024="";

    var Firefox800="";

    var Firefox1152="";

    var Firefoxother="";


        引号里面分别填写,用户使用FireFox(一个也很流行的浏览器)的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。


    var Other1024="";

    var Other800="";

    var Other1152="";

    var Otherother="";


        引号里面分别填写,用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。

      二、不判断分辨率,只判断浏览器实现根据浏览器类型自动调用不同CSS。

     
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    if (window.navigator.userAgent.indexOf("MSIE")>=1)
    {
    //如果浏览器为IE
    setActiveStyleSheet("default.css");
    }else{
    if (window.navigator.userAgent.indexOf("Firefox")>=1)
    {
    //如果浏览器为Firefox
    setActiveStyleSheet("default2.css");
    }else{
    //如果浏览器为其他
    setActiveStyleSheet("newsky.css");
    }
    }

    function setActiveStyleSheet(title){
      document.getElementsByTagName("link")[0].href="style/"+title;
    }
    //-->
    </SCRIPT>


        解释:(和前面的差不多)

          如果浏览器为IE,则调用default.css

          如果浏览器为Firefox,则调用default2.css

          如果浏览器为其他,则调用newsky.css

        使用方法:

          很简单,放在 “</head>” 前面即可。
     
     

    页面在不同屏幕分辨率下存在的问题及解决办法

    (未考虑800*600或更低分辨率的情况)

    一 问题

    在不同分辨率下,页面布局存在不同程度的差异,特别是页面上的表单控件,其宽度默认是固定值“width:150px”,当分辨率较高时,表格中的空白显得过多,页面布局显得很不协调,在宽屏显示器上尤为明显。

    二 解决办法

    方法1. 为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件。样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可。

    在包含的头文件headr.inc中加入js代码:

    if(screen.width > 1024){

    document.write('<link rel="stylesheet" type="text/css" href="${path}/nrmus/etc/css/forms_'+ screen.width +'.css">');

    }

    forms_1280.css文件内容:

    /* 分辨率宽度为1280的时候,文本框和下拉框的宽度属性(width)单独定义

    * 参考计算方法为:(分辨率宽度-174)/4 * 0.7

    * 左侧菜单栏宽度为174px;右侧页面表格是4列;控件宽度为单元格的70%

    * (1280-174)/4*0.7 = 193

    */

    input.text

    {

    background:#FFFFFF;

    border:1px solid #B5B8C8;

    padding:3px 3px;

    height:22px;

    line-height:18px;

    vertical-align:middle;

    padding-bottom:0pt;

    padding-top:2px;

    width: 193px;

    color: #333;

    }

    select.select{

    width: 193px;

    }

    优点:实现很简单,代码量少;并且可针对不同分辨率做更细粒度的页面控制。

    缺点:无明显缺点。

    方法2 将整个页面的宽度设置为固定值,并使其居中显示。

    优点:可以很大程度的消除不同分辨率下的显示差异。

    缺点:分辨率宽度大于这个固定值的时候,页面两边会出现空白。

    方法3 用js判断分辨率,修改body的zoom属性(IE特性),即可实现对整个页面进行缩放,类似IE8或其它浏览器提供的缩放功能。

    优点:实现简单,页面能进行缩放。

    缺点:缩放是宽度和高度的等比缩放,高分辨率下字体、图片看起来会变小,问题解决的不彻底。

     

    三 总结

    推荐方法1。页面布局的变化和分辨率的宽度有密切关系,和高度关系不大;常用的分辨率宽度也就几种,做几个简单的css文件即可。

    展开全文
  • 分辨率自适应,媒体查询

    当分辨率小于480的时候,footer中的文字由于太大会显示三行,如何去处理?

    在这里,可以使用,媒体查询。
    当媒体查询大于480px小于640px时:

    @media  (min-width: 480px) and (max-width: 640px){
    #footer .bottom{
            font-size: .13rem;
        }
    }

    当媒体查询小于480px

    @media   (max-width: 480px){
     #footer .bottom {
            font-size: .10rem;
        }
    }

    在这里,这两段代码就可以根据手机分辨率的大小来显示字体的大小。

    展开全文
  • 根据不同的分辨率,加载不同的CSS样式文件 这个方法的思路是,分别针对800、1280、1440、1600、1920等分辨率,创建不同的css文件。然后在各种分辨率下,写css样式表。 可能你会感觉针对一个页面,要写这么多不同的...

    一.根据不同的分辨率,加载不同的CSS样式文件

    这个方法的思路是,分别针对800、1280、1440、1600、1920等分辨率,创建不同的css文件。然后在各种分辨率下,写css样式表。

    可能你会感觉针对一个页面,要写这么多不同的css样式表,这个工作量肯定很大。其实也不尽然,根据我在这个项目中的实践,发现这个工作量其实是比较小的。

    首先,我们在做项目的时候,一般情况下会有一些范围限制,比如这个项目只需要适配1280~1920分辨率即可。而且各个分辨率之间,我们有的时候只是对页面上的元素进行宽高、尺寸、位置等进行调整,整体的一个框架是相似或者说是相同的。

    不仅如此,有的时候项目的要求不高,没有比较1:1高度还原设计稿,那么这个时候,我们在1440分辨率下的样式表,在1280分辨率下也是实用的,这个时候,我们的工作量又进一步减少。

    这个时候,我们可以先完成一个分辨率下的css样式表。然后在这个基础之上,对其他分辨率进行调整即可。这个过程我们只需要调整一些参数即可。

    比如在我的项目里面,这对不同的分辨率,我只做了三个样式表

    img_eddf428561a7ded16aa22ee5a91b08d1.png

    样式表

    这个时候,我们只需要在我们的HTML页面的<head></head>标签中,使用js,根据不同的电脑分辨率,加载不同的css样式表。注意这里的js一定要写在<head></head>标签里面,这样在加载页面内容之前,可以提前把css样式表加载出来

    
     
    1. <script>

    2. // 分辨率大于等于1680,大部分为1920的情况下,调用此css

    3. if(window.screen.width >= 1680){

    4. document.write('<link rel="stylesheet" href="css/index_1920.css">');

    5. }

    6. // 分辨率再在1600-1680的情况下,调用此css

    7. else if(window.screen.width >= 1600){

    8. document.write('<link rel="stylesheet" href="css/index_1600.css">');

    9. }

    10. // 分辨率小于1600的情况下,调用此css

    11. else{

    12. document.write('<link rel="stylesheet" href="css/index.css">');

    13. }

    14. </script>

    这样的话,就可以根据不同电脑的分辨率,就在不同的css样式表。由此我们便完成了页面使用不同的分辨率。

    二.采用媒体查询

    媒体查询是CSS3的新特性,绝大多数浏览器都可兼容这一特性。这个方法的思路也是根据不同的分辨率,应用不同的css样式。

    如果你对媒体查询不熟悉,可以点击链接进行学习这一新特性。菜鸟教程-CSS3 @media 查询

    这个思路和和方法一差不多,或者说方法一的思路和这个思路差不多,毕竟这也是官方的做法。我们有两种使用媒体查询的方式。

    1.根据不同的分辨率,引入不同的css样式表

    这个方法和方法一相同,也是通过判断电脑的分辨率,来引入相对应的css样式表。

    
     
    1. <!-- 分辨率低于1280,采用test-01.css样式表 -->

    2. <link rel="stylesheet" media="screen and (max-device-width:1280px)" href="test-01.css">

    3. <!-- 分辨率高于1400,采用test-02.css样式表 -->

    4. <link rel="stylesheet" media="screen and (min-device-width:1440px)" href="test-02.css">

    2.在同一个css样式表中,根据不同的分辨率,写不同的css样式

    这个方法只有一个css演示表,在这个样式表里面,根据不同的分辨率,写不同的css样式。

    <style media="screen">
    
    /*分辨率低于1280,采用下面的样式*/
    
    @media screen and (max-device-width:1280px){
    
    div{
    
    width: 200px;
    
    height: 200px;
    
    background-color: green;
    
    }
    
    }
    
    
    /*分辨率高于1440,采用下面的样式*/
    
    @media screen and (min-device-width: 1440px){
    
    div{
    
    width: 300px;
    
    height: 300px;
    
    background-color: red;
    
    }
    
    }
    
    </style>

    三. 总结

    以上的方法的思路大同小异,根据我自己的经历,给大家提出一些小的建议。

    因为我在公司的电脑的分辨率是1440,所以一开始我实在1440分辨率下写得css样式表,然后在这个基础之上,去调整其他的分辨率。发现根据小分辨率样式去调整大分辨率样式比较简单。当然,也许你喜欢由大到小,这都无所谓,看个人兴趣。

    还有就是,我们在写css样式标的时候,尽量写得规整一点。某一部分的css样式写在一起,最好有注释,这样我们在其他分辨率下去调整的时候,不至于一头雾水。

    本文是转载,如果作者,不愿意,请私信我,我会及时删除该贴。

    展开全文
  • Vmware 自适应分辨率设置

    千次阅读 2020-02-05 14:59:19
    Vmware安装虚拟机后,保持最佳分辨率,设置如下: 1、安装Vmware tools 对于windows虚拟机,则是直接安装软件,一路下一步即可; 对于Linux虚拟机,则会出现一个光驱,我们将光驱内的“VMwareTools-XXX.tar.gz...
  • vb界面自适应不同分辨率终极解决方案ghhjfgkjgkduuuse5tu
  • js实现自适应界面分辨率

    万次阅读 2018-01-30 17:22:49
    首先最直接遇到的问题是,如果我们在css中将div的width和height写死的话,那么我们所遇到的问题就是当换一个不同的分辨率的显示器进行显示的时候,那么就会出现界面的样式不能适应当前分辨率的界面,所以,自适应是...
  • QT界面自适应屏幕分辨率与自缩放

    万次阅读 2019-07-17 21:29:56
    最近用qt做了一个界面,主要功能是实时显示两台相机采集的图片以及拼接两张图片再显示,还有通过界面调整图像大小等参数。 主要通过UI设计器Qt Designer完成。 1、创建界面时,需要创建界面的基类(base class)。...
  • js自适应不同屏幕分辨率 /* *代码如下 *其中的参数1080根据自己的实际情况进行修改,这里的1080代表设计页面的原始宽度,可以参考psd的标准宽度,这是后字体使用rem也有了标准,psd上的字号如:40点 对应css中的...
  • 自适应分辨率

    2017-06-21 10:37:15
    {实现窗体自适应调整尺寸以适应不同屏幕分辩率的显示问题。  陈小斌,2012年3月5日 } interface Uses  SysUtils,Windows,Classes,Graphics, Controls,Forms,Dialogs, Math,  uMySysUtils; Const //...
  • QT应用程序分辨率自适应

    万次阅读 多人点赞 2016-10-18 22:24:20
    QT应用程序分辨率自适应一、应用程序分辨率自适应    为了满足应用程序能在不同尺寸及分辨率的屏幕下能够正常的运行显示,就需要对不同的分辨率进行自适应,而且应用程序分辨率自适应的问题在应用UI设计布局以及...
  • MFC 窗口自适应分辨率

    万次阅读 2015-07-02 10:33:53
    BOOL CEasySizeDlg::OnInitDialog() ... //正常(编写程序时)的分辨率为1920*1080,此时窗口大小为958*486. (Dialog 属性:System12) int x,y; x=::GetSystemMetrics(SM_CXSCREEN)*958/1920; y=::GetSyste
  • Vmware 安装Ubuntu 18.04,更新后,不能自适应窗口。 重新安装Vmware Tools,不行。 安装 open-vm-tools,也不行。 按照如下操作步骤: 修改: /etc/systemd/system/multi-user.target.wants/open-vm-tools....
  • 对字体使用百分比设置,例如: fontSize: '100%',
  • 第一次做网页程序,最烦这个页面适配,不清楚到底用哪种方法比较好,(比如1920x1080下看起来ok,但是换成别的分辨率就不太对了),还有就是手机上显示又应该怎么做呢,
  • HTML分辨率自适应

    千次阅读 2015-08-25 17:37:34
    <title>div 分辨率自适应 html,body{height:100%; width:100%; overflow:hidden; margin:0; padding:0;} .main{width:100%; height:100%; overflow:hidden; margin:0; paddi
  • js自动缩放页面自适应屏幕分辨率

    千次阅读 2019-05-06 20:46:49
    js自动缩放页面自适应屏幕分辨率欢迎使用Markdown编辑器 欢迎使用Markdown编辑器 当开发前端页面在分辨率1920的情况下,需要切换到小屏,有种方法是可以对屏幕比例进行缩放,通过css3属性transform可以自适应屏幕...
  • Unity GUI自适应屏幕分辨率的方法

    万次阅读 2016-08-05 08:51:15
    1:GUI自适应屏幕方法. 由于屏幕尺寸的问题,我们设计的UI在不同尺寸屏幕上不能很好的工作,因此我们的工程需要适应不同屏幕的要求,unity新版本中已经可以设置屏幕自适应而不需要我们自己去设置,在设置之前我们先...
  • pt也称为逻辑分辨率 pt的大小和屏幕尺寸有关系,简单可以理解为... 如何做不同分辨率设备的自适应 以iPhone6物理像素750*1334为视觉稿进行设计,而在小程序中使用rpx为单位 iPhone6下 1px = 1rpx = 0.5pt ...
  • C# WPF 界面根据分辨率的大小自适应

    万次阅读 2016-12-22 01:53:25
    一般程序的界面做完之后都要考虑到多分辨率的问题
1 2 3 4 5 ... 20
收藏数 26,602
精华内容 10,640
关键字:

自适应分辨率