精华内容
下载资源
问答
  • 不同分辨率下写不同的样式。 使用@media元素 这样写 @media screen and (max-width:180pt) {html { font-size: 6pt }} @media screen and (max-width:210pt)and (min-width:180pt) {html { font-size: 7pt }} @media...

    不同分辨率下写不同的样式。

    使用@media元素

    这样写
    @media screen and (max-width:180pt) {html { font-size: 6pt }}
    @media screen and (max-width:210pt)and (min-width:180pt) {html { font-size: 7pt }}
    @media screen and (max-width:240pt)and (min-width:210pt) {html { font-size: 8pt }}
    @media screen and (max-width:300pt)and (min-width:240pt) {html { font-size: 10pt }}
    @media screen and (max-width:360pt)and (min-width:300pt) {html { font-size: 12pt }}
    @media screen and (max-width:450pt)and (min-width:360pt) {html { font-size: 15pt }}
    @media screen and (min-width:450pt) {html { font-size: 18pt; }}


    例子如:http://www.strengthspartnership.com/ 


    展开全文
  • //页面加载时执行 window.onload = function () { //根据元素ID获取html元素 var element_obj = document.getElementById("wrapper"); //获取屏幕的高度 var heigth_screen = window.screen.height; //...

    一、使用JS控制与元素长度和高度

       //页面加载时执行
     window.onload = function () {  
     		 //根据元素ID获取html元素
            var element_obj = document.getElementById("wrapper"); 
             //获取屏幕的高度
            var heigth_screen = window.screen.height;  
             //获取屏幕的宽度
            var width_screen = window.screen.width; 
             //通过系数调整元素所需的高度和宽度,将调整好的高度和宽度赋值给html元素
                heigth_screen = heigth_screen * 1;
            element_obj.style.height = heigth_screen + "px";
            width_screen = width_screen * 1;
            element_obj.style.width = width_screen + "px";
        };
    

    注意
               1. js会在css后执行,html页面打开时可能会先出现css控制的样式,随后执行js后改变为js控制的样式。

               2. 只需在html最外层自建元素使用此js控制屏幕布局适配,无需为每个元素使用此js。

               3. 最外层元素的内部元素使用px为单位设置高度不会影响此js。

               4. 浏览器及其版本兼容性不确定,仅供参考学习。

    知识点:
    1. window.onload与window.ready区别。
    2. 如何获取屏幕、浏览器…的高度和宽度…。
    3. 如何使用框架的语法替换原生js语法。
    4. css单位是如何计算生成的。
    5. 如何获取元素ID。
    6. 了解rem、em 或者vw、vh为单位进行布局。

    如果有更好地适配屏幕尺寸的方法,欢迎交流!!!
    展开全文
  • html <body> <div class="container"> <div class="img container-item"> <img src="./404.svg" alt="" srcset=""> div> <div class="content container-item"> <div class="code">404div> <div class="tip">你查看的页面貌似丢失了呢...div>...<div class="action"> 返回首页a> 查看更多内容a> div> div> div> body> css 注 1. font-size:0 https://www.cnblogs.com/guagnxu/p/6382163.html 2. clamp函数 ...

    效果图

    在这里插入图片描述

    html

    <body>
      <div class="container">
        <div class="img container-item">
          <img src="./404.svg" alt="" srcset="">
        </div>
        <div class="content container-item">
          <div class="code">404</div>
          <div class="tip">你查看的页面貌似丢失了呢...</div>
          <div class="action">
            <a href="#" class="toHome">返回首页</a>
            <a href="#" class="more">查看更多内容</a>
          </div>
        </div>
      </div>
    </body>
    

    css

     <style>
        * {
          padding: 0;
          margin: 0;
        }
    
        html,
        body {
          height: 100%;
        }
    
        body {
          background: #eee;
          /* container垂直水平居中 */
          display: flex;
          align-items: center;
          justify-content: center;
        }
    
        .container {
          width: 80%;
          max-width: 1000px;
          min-width: 600px;
          max-height: 500px;
          border-radius: 15px;
          background: #fff;
          display: flex;
          box-shadow: 0px 0px 10px 5px #ccc;
        }
    
        .container .container-item {
          /* 左侧和右侧各占50% */
          width: 50%;
        }
    
        .container .img {
          background: #ffcc93;
          border-top-left-radius: 15px;
          border-bottom-left-radius: 15px;
        }
    
        .container .content {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          color: #666;
        }
    
        .container .content .code {
          font-size: clamp(150px, 20vw, 200px);
          font-weight: bold;
          text-align: center;
          color: #5d72ff;
          font-family: Arial, Helvetica, sans-serif;
        }
    
        .container .content .tip {
          text-align: center;
        }
    
        .container .content .action {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 20px;
        }
    
        .container .content .action a {
          color: #666;
          margin: 0 5px;
        }
      </style>
    


    1. font-size:0

    https://www.cnblogs.com/guagnxu/p/6382163.html

    2. clamp函数

    https://blog.csdn.net/lvonve/article/details/109089498

    展开全文
  • css适配不同分辨率屏幕

    万次阅读 2018-07-21 14:39:20
    如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大...页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来,我们将了解一下怎样通过HTML5和CSS3 Media Queries...

    如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来,我们将了解一下怎样通过HTML5和CSS3 Media Queries(媒介查询)相关技术来实现跨设备跨浏览器的响应式Web设计方案。

    范例效果预览

    首先,我们来看看本篇范例的最终效果演示。打开该页面,拖拽浏览器边框,将窗口慢慢缩小,同时观察页面结构及元素布局是怎样基于宽度变化而自动响应调整的。

     

    html5-css3-responsive-web-design-final-demo

    更多范例

    我(原文作者)使用media query的方式设计了一些WordPress模板,比如TisaEleminSucoiTheme2FunkiMinblrWumblr等。

    概述

    我们将范例页面的父级容器宽度设置为固定的980px,对于桌面浏览环境,该宽度适用于任何宽于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率,并将页面的宽度设置由"固定"方式改为"液态",布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可视部分的宽度进一步减小到650px以下时,主要内容部分的容器宽度会增大至全屏,而侧边栏将被置于主内容部分的下方,整个页面变为单栏布局。

    html5-css3-responsive-web-design-design-overview

    HTML代码

    我们将把注意力集中在页面的主要布局方面,并使用HTML5标签来更加语义化的实现这些结构,包括页头、主要内容部分、侧边栏和页脚:

    <div id="pagewrap">
    <header id="header">
    <hgroup>
    <h1 id="site-logo">Demo</h1>
    <h2 id="site-description">Site Description</h2>
    </hgroup>
    <nav>
    <ul id="main-nav">
    <li><a href="#">Home</a></li>
    </ul>
    </nav>
    <form id="searchform">
    <input type="search">
    </form>
    </header>
    <div id="content">
    <article class="post"> blog post </article>
    </div>
    <aside id="sidebar">
    <section class="widget"> widget </section>
    </aside>
    <footer id="footer"> footer </footer>
    </div>
    

    HTML5.js

    IE是永恒的话题;对于我们使用的HTML5标签,IE9之前的版本无法提供支持。目前的最佳解决方案仍是通过html5.js来帮助这些旧版本的IE浏览器创建HTML5元素节点。在我们的页面HTML代码中调用该JS文件:

    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    

    CSS

    HTML5块级元素样式

    首先仍是浏览器兼容问题。虽然我们已经可以在低版本的IE中创建HTML5元素节点,但还是需要在样式方面做些工作,将这些"新"元素声明为块级:

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {     display: block; }

    主要结构的CSS

    忽略细节,我们仍是将注意力集中在大问题上。正如在前文"概述"中提到的,默认情况下页面容器的固定宽度为980像素,页头部分(header)的固定高度为160像素;主要内容部分(content)的宽度为600像素,左浮动;侧边栏(sidebar)右浮动,宽度为280像素。

    #pagewrap {
        width: 980px;
        margin: 0 auto;
    }
     
    #header {
        height: 160px;
    }
     
    #content {
        width: 600px;
        float: left;
    }
     
    #sidebar {
        width: 280px;
        float: right;
    }
     
    #footer {
        clear: both;
    }
    

    截至目前的效果演示

    目前我们只是初步完成了页面结构的HTML和默认结构样式,当然,并不包括那些与话题无关的细节实现问题。正如可以在目前的演示中看到的,由于还没有做任何media query方面的工作,页面还不能随着浏览器尺寸的变化而改变布局。

    CSS3 Media Query

    终于开始说正事儿了。首先我们需要在页面中调用css3-mediaqueries.js文件,来帮助IE8或是之前的版本支持CSS3 media queries:

    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    

    接下来,我们要创建CSS样式表,并在页面中调用:

    <link href="media-queries.css" rel="stylesheet" type="text/css">
    

    当浏览器可视部分宽度大于650px小于980px时(液态布局)

    将pagewrap的宽度设置为95%

    将content的宽度设置为60%

    将sidebar的宽度设置为30%

    @media screen and (max-width: 980px) {
     
        #pagewrap {
            width: 95%;
        }
     
        #content {
            width: 60%;
            padding: 3% 4%;
        }
     
        #sidebar {
            width: 30%;
        }
        #sidebar .widget {
            padding: 8% 7%;
            margin-bottom: 10px;
        }
     
    }
    

    当浏览器可视部分宽度小于650px时(单栏布局)

    将header的高度设置为auto

    将searchform绝对定位在top 5px的位置

    将main-nav、site-logo、site-description的定位设置为static

    将content的宽度设置为auto(主要内容部分的宽度将扩展至满屏),并取消float设置

    将sidebar的宽度设置为100%,并取消float设置

    @media screen and (max-width: 650px) {
     
        #header {
            height: auto;
        }
     
        #searchform {
            position: absolute;
            top: 5px;
            right: 0;
        }
     
        #main-nav {
            position: static;
        }
     
        #site-logo {
            margin: 15px 100px 5px 0;
            position: static;
        }
     
        #site-description {
            margin: 0 0 15px;
            position: static;
        }
     
        #content {
            width: auto;
            float: none;
            margin: 20px 0;
        }
     
        #sidebar {
            width: 100%;
            float: none;
            margin: 0;
        }
     
    }
    

    当浏览器可视部分宽度小于480px时

    480px也就是iPhone横屏时的宽度。当可视部分的宽度小于该数值时,我们需要做以下调整:

    禁用html节点的字号自动调整。默认情况下,iPhone会将过小的字号放大,我们可以通过-webkit-text-size-adjust属性进行调整。

    将main-nav中的字号设置为90%

    @media screen and (max-width: 480px) {
     
        html {
            -webkit-text-size-adjust: none;
        }
     
        #main-nav a {
            font-size: 90%;
            padding: 10px 8px;
        }
     
    }
    

    弹性图片

    我们需要为图片设置max-width:100%和height:auto,来实现其弹性化。对于IE,仍然需要一点额外的工作:

    img {
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
    }
    

    弹性内嵌视频

    同样的,对于视频,我们也需要做max-width: 100%的设置;但是Safari对embed的该属性支持不是很给力,所以我们以width: 100%来代替:

    .video embed,
    .video object,
    .video iframe {
        width: 100%;
        height: auto;
    }
    

    iPhone中的初始化缩放

    默认情况下,iPhone中的Safari浏览器会对页面进行自动缩放,以适应屏幕尺寸。我们可以使用以下的meta设置,将设备的默认宽度作为页面在Safari的可视部分宽度,并禁止初始化缩放。

    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    

    最终效果演示

    该范例的最终演示正像我们在本文开始时看到的那样;另外记得,在条件允许的情况下,使用各种典型移动设备(iPhone、iPad、Android、Blackberry等)来检验页面的移动版本。

    html5-css3-responsive-web-design-final-demo

    要点总结

    Media Query JavaScript

    对于那些尚不支持media query的浏览器,我们要在页面中调用css3-mediaqueries.js

    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    

    CSS Media Queries

    实现自适应页面设计的关键之一,就是使用CSS根据分辨率宽度的变化来调整页面布局结构。

    @media screen and (max-width: 560px) {
    
        #content {
    
            width: auto;
    
            float: none;
    
        }
    
        #sidebar {
    
            width: 100%;
    
            float: none;
    
        }
    }

     

    弹性图片

    通过max-width:100%和height:auto实现图片的弹性化。

    img {
    
        max-width: 100%;
    
        height: auto;
    
        width: auto\9; /* ie8 */
    
    }

    弹性内嵌元素(视频)

    通过width:100%和height:auto实现内嵌元素的弹性化。

    .video embed,
    
    .video object,
    
    .video iframe {
    
        width: 100%;
    
        height: auto;
    
    }

    字号自动调整的问题

    通过-webkit-text-size-adjust:none禁用iPhone中Safari的字号自动调整

    html {
    
        -webkit-text-size-adjust: none;
    
    }

    页面宽度缩放的问题

    <meta name="viewport" content="width=device-width; initial-scale=1.0">

     

    文章转载于: https://blog.csdn.net/cyjch/article/details/51506320

    版权声明:博客对我来说是记忆的笔记和知识的分享~非常感谢博客大神的帮助,若有无意侵权,请您联系我,谢谢  https://blog.csdn.net/qq_36698956

    展开全文
  • 适配不同分辨率屏幕

    万次阅读 2016-05-26 12:59:00
    如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大...页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来,我们将了解一下怎样通过HTML5和CSS3 Media Queries
  • 手机h5适配不同分辨率的问题

    千次阅读 2015-04-10 11:44:43
    我们来研究一下手机H5页面适配不同手机分辨率的问题。
  • npm install postcss-px2rem px2rem-loader --save utils / rem.js const baseSize = 16 // 设置 rem 函数 function setRem () { // 当前页面宽度相... // 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高
  • 自己用的,页面的font-size定义为100px,其他像素单位用rem,设计比率满屏是750px,在不同分辨率下都要求铺满100%(function (win) {var doc = win.document,$html = doc.getElementsByTagName('html')[0],...
  • Documentbody,...margin:0px;}.containner{width: 100%;background-color: green;}var screenHeight = window.screen.height;var availHeight = window.screen.availHeight;var heightnum = heightNum...
  • 之前写过一个系统是在自己的电脑上调的,页面展示是合适的,但到别人电脑上是很小的一点,看着不是很美观,所以想适配不同的屏幕。 比如在我的电脑上是这样: 在别人电脑上可能是这样(屏幕下方有一大块空白页面)...
  • 要实现页面不同分辨率都呈现出良好的效果,一定要通过 显示分辨率来调试,而不是去拉伸屏幕的宽度 PC端需要适配 1920*1080,1680*1050,1600*900,1440*900,1400*1050,1366*768
  • 用html和css布局的页面,自己的电脑是1365 736的分辨率,放在1920 1080分辨率的屏幕上排版就乱了,这应该怎么解决
  • 第一次做网页程序,最烦这个页面适配,不清楚到底用哪种方法比较好,(比如1920x1080下看起来ok,但是换成别的分辨率就不太对了),还有就是手机上显示又应该怎么做呢,
  • 浏览器窗口缩放,页面所有元素会自动跟随缩放(注意:chrome浏览器默认最小字体尺寸为12px,所以字体缩小到12px后将不再缩小)。 无滚动条,浏览器窗口大小和比例的改变都不会出现滚动条。 实现步骤: 使用rem...
  • PC端页面适应不同分辨率的方法

    万次阅读 多人点赞 2018-07-30 10:44:30
    上周完成一个PC端的项目,对于我这样的小白来说,这个项目里面最大的问题就是,如何做到让HTML页面适应电脑的不同分辨率。 通过师傅的指导和自己查阅资料,最终成功适配不同的分辨率,完成了这个项目。 现在回头...
  • 本项目是开发时候按照1920*1080大小做的,fullscreenable是确定窗口是否全屏的,在低于1920*1080的大小,不同分辨率宽高比例不同,为了页面正常显示,小于1920*1080的,给它设置宽高 function createWindow () { let ...
  • 上周完成一个PC端的项目,对于我这样的小白来说,这个项目里面最大的问题就是,如何做到让HTML页面适应电脑的不同分辨率。 通过师傅的指导和自己查阅资料,最终成功适配不同的分辨率,完成了这个项目。 现在回头再来...
  • 使用方法: lib-flexible库的使用方法非常的简单,只需要在Web页面的<head></head>中添加对应的flexible_css.js,flexible.js文件 第一种方法是将文件下载到你的项目中,然后...
  • 但是还是不清楚怎么进行图片分辨率适配的,在百度了之后,仍然有点云里雾里,罢了,直接上官网看吧,果然,清晰了。这里附上官网链接Image.asset页面。 这里只说本地文件夹下图片资源配置及使用的问题。关于构造...
  • 一、本文提到的引导画面的形式 类似下图,一个引导画面是一屏,左右拖动来切换 ...需要知道的是,同一DPI的设备也有不同分辨率,比如Hdpi最常见的就有480×800和480×854的分辨率,还有其他的,比如480×640
  • 一、关于使用代码编辑页面控件时不同分辨率的自适应(可以参考自己项目:76天-项目实战--我的微信),还可以参考自己的项目:UI适配之-界面适配(使用宏的方式) 方法一:下面是基于76天的项目的。...
  • 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备...
  • android屏幕分辨率适配

    2014-08-03 18:11:10
    不同分辨率下容易出现的问题  由于目前android设备的分辨率种类很多,在开发的时候不注意进行屏幕适配的话会出现很多问题。 比如高分辨率和低分辨率下的图片显示问题,在高分辨率下显示低分辨率图片显示质量...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 395
精华内容 158
关键字:

页面适配不同分辨率