精华内容
下载资源
问答
  • 我做的网页感觉在不同屏幕分辨率下显示效果不同,现在又什么好的办法解决这个问题没,能让网页自适应屏幕分辨率 并且布局保持不变 不管多大屏幕显示的是整个页面的放大或缩小之后的布局
  • 如何让网页自适应所有屏幕宽度

    万次阅读 多人点赞 2017-03-03 15:18:04
    于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页手机屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上,有的还达到了2000像素。同样的内容,要在大小...

      随着网络的快熟发展,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上,有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。很多网站的做法是对不同终端设计多个网页,但这样会有很多维护的问题,在这里我们可以设计一个简单的盒子,这个盒子可以识别不同的终端而显示不同的效果

    1. 在网页代码的头部,加入一行viewport元标签。

      <meta name="viewport" content="width=device-width,initial-scale=1" />

      viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

    2.  

      由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。对图像来说也是这样。

      具体说,CSS代码不能指定像素宽度:

      width:xxx px;

      只能指定百分比宽度:

      width: xx%;

      或者

      width:auto;

    3.  

      字体也不能使用绝对大小(px),而只能使用相对大小(em)。

      例如:

      body {font: normal 100% Helvetica, Arial,sans-serif;}

      上面的代码指定,字体大小是页面默认大小的100%,即16像素。

    4.  

      流动布局(fluid grid)

      "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。

      .main {float: right;width: 70%; }

      .leftBar {float: left;width: 25%;}

      float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

    5.  

      "自适应网页设计"的核心,就是CSS3引入的MediaQuery模块。

      它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

      <link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css" />

      上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

      <link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="smallScreen.css" />

      如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

    展开全文
  • 请教各位达人一个问题 如何使用jQuery Mobilepc网页自适应手机屏幕
  • 手机或平板设备屏幕大小差距大,因此打开网页时宽度也不同,新做的手机网站如何能够自适应网页宽度,就有了一些难度,还好程序猿们想到了这一点,在代码里面做了如此设置,下面简单讲解一下。 工具/原料   ...
    手机或平板设备屏幕大小差距大,因此打开网页时宽度也不同,新做的手机网站如何能够自适应网页宽度,就有了一些难度,还好程序猿们想到了这一点,在代码里面做了如此设置,下面简单讲解一下。


    工具/原料
     
    写代码软件,记事本或DW都可以
    手机或平板一台,做测试
    方法/步骤
     
     
    方法:在网页头部加上这样一条meta标签:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 


     


    解释:


    width=device-width :宽度等于设备屏幕的宽度


    initial-scale=1.0:表示:初始的缩放比例


    minimum-scale=0.5:表示:最小的缩放比例


    maximum-scale=2.0:表示:最大的缩放比例


    user-scalable=yes:表示:用户是否可以调整缩放比例


    2
    另外:如果想控制字体的大小的话,应该使用相对大小,可以用下面这段代码,一般不用也可,这里只是说名一种方法。


    相对大小的字体


    字体也不能使用绝对大小px,而只能使用相对大小em。


      body {font: normal 100% Helvetica, Arial, sans-serif;}


    上面的代码指定,字体大小是页面默认大小的100%,即16像素。


      h1 {font-size: 1.5em; }


    然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。


      small {font-size: 0.875em;}


    small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。


     


     


     


    有两种
    1.通过设置viewport参数
    2.使用css3中的缩放
    两种方法都需要获取当前屏幕大小然后根据网页宽度来计算缩放比例,然后进行缩放。但是因为目前手机种类繁多,浏览器种类也很多,所以每种方法各自都有不少的问题。


    <</span>meta name=“viewport” content=“width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” /> 
    在网页的中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。


    其中:
    width=device-width :表示宽度是设备屏幕的宽度
    initial-scale=1.0:表示初始的缩放比例
    minimum-scale=0.5:表示最小的缩放比例
    maximum-scale=2.0:表示最大的缩放比例
    user-scalable=yes:表示用户是否可以调整缩放比例 
    展开全文
  • 手机或平板设备屏幕大小差距大,因此打开网页时宽度也不同,新做的手机网站如何能够自适应网页宽度,就有了一些难度,还好程序猿们想到了这一点,在代码里面做了如此设置,下面简单讲解一下。方法:在网页头部加上...

    手机或平板设备屏幕大小差距大,因此打开网页时宽度也不同,新做的手机网站如何能够自适应网页宽度,就有了一些难度,还好程序猿们想到了这一点,在代码里面做了如此设置,下面简单讲解一下。

    方法:在网页头部加上这样一条meta标签:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    解释:
    width=device-width :宽度等于设备屏幕的宽度
    initial-scale=1.0:表示:初始的缩放比例
    minimum-scale=0.5:表示:最小的缩放比例
    maximum-scale=2.0:表示:最大的缩放比例
    user-scalable=yes:表示:用户是否可以调整缩放比例

    另外:如果想控制字体的大小的话,应该使用相对大小,可以用下面这段代码,一般不用也可,这里只是说名一种方法。
    相对大小的字体
    字体也不能使用绝对大小px,而只能使用相对大小em。
      body {font: normal 100% Helvetica, Arial, sans-serif;}
    上面的代码指定,字体大小是页面默认大小的100%,即16像素。
      h1 {font-size: 1.5em; }
    然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
      small {font-size: 0.875em;}
    small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

    展开全文
  • 进入移动互联网时代,各种移动设备层出不穷,屏幕尺寸大小不一,对于同一个html5移动页面怎样自适应手机屏幕是前端开发工程师需要考虑的一个问题,毕竟根据一个屏幕尺寸开发一个html5移动页面不太现实,能够做到...

    进入移动互联网时代,各种移动设备层出不穷,屏幕尺寸大小不一,对于同一个html5移动页面怎样让其自适应手机屏幕是前端开发工程师需要考虑的一个问题,毕竟根据一个屏幕尺寸开发一个html5移动页面不太现实,能够做到自适应的话会省事很多。今天就让南京学码思web培训学校老师来给大家传授四招。

    1、使用meta标签:viewport

    H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

    viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。

    手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。

    viewport标签极其属性:

    每个属性的详细介绍:

    11

    2、使用css3单位rem

    rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,是相对大小,但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

    目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:

    p {font-size:14px; font-size:.875rem;}

    默认html的font-size是16px,即1rem=16px,如果某div宽度为32px你可以设为2rem。

    通常情况下,为了便于计算数值则使用62.5%,即默认的10px作为基数。当然这个基数可以为任何数值,视具体情况而定。设置方法如下:

    Html{font-size:62.5%(10/16*100%)}

    具体不同屏幕下的规则定义,即基数的定义方式:可以通过CSS定义,不同宽度范围里定义不同的基数值,当然也可以通过js一次定义方法如下:

    (function (doc, win) {

    var docEl = doc.documentElement,

    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

    recalc = function () {

    var clientWidth = docEl.clientWidth;

    if (!clientWidth) return;

    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化

    };

    if (!doc.addEventListener) return;

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

    })(document, window);

    3、使用媒体查询

    媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生。

    媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等。

    例如:如果浏览器窗口小于 500px, 背景将变为浅蓝色:

    @media only screen and (max-width: 500px) {

    body {

    background-color: lightblue;

    }

    }

    4、使用百分比

    百分比指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是100%;

    所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。

    以上就是前端工程师让html5移动页面自适应手机屏幕常用的四招,大家可以多学习借鉴一下。如果你还想学习更多web前端技巧和知识的话,可以直接咨询学码思在线老师,也欢迎大家亲自前来南京学码思web培训学校,领取直接web前端教程,还能进入课堂试听感受学码思web培训课程,与老师和学员面对面沟通交流。

    展开全文
  • 手机或平板设备屏幕大小差距大,因此打开网页时宽度也不同,新做的手机网站如何能够自适应网页宽度,就有了一些难度,还好程序猿们想到了这一点,在代码里面做了如此设置,下面简单讲解一下。 工具/原料 ...
  • 那么就会出现一个问题,如何才能PC端的网页手机上正常显示?手机与PC的屏幕宽度有着很大的区别,会造成同样的内容在手机与PC端出现两种不同的显示结果。那该如何才能使得手机与PC都能对网页呈现出令人满意的结果...
  • 那么就会出现一个问题,如何才能PC端的网页手机上正常显示?手机与PC的屏幕宽度有着很大的区别,会造成同样的内容在手机与PC端出现两种不同的显示结果。那该如何才能使得手机与PC都能对网页呈现出令人满意的结果...
  • 网页自适应pc端和移动端

    千次阅读 2018-05-23 09:45:51
    网页自适应pc端和移动端手机屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果...
  • 而现在的设备大小尺寸不一,近年来智能手机的普及更是让网页的用户大部分来源与手机,所以不同大小的移动端屏幕都能较好的还原设计稿就成了一个前端开发者需要解决的当务之急。我查阅了大量资料和进行了一些实践,...
  • 如何解决手机网站的自适应问题

    千次阅读 2017-11-03 11:18:39
    说起手机网站的开发,最新手脑大的问题,莫过于网站的自适应了。我当初也被这个问题 困扰得抓耳挠腮,因此总结一些方法希望能帮到大家。1、使用meta标签:viewportH5移动端页面自适应普遍使用的方法,理论上讲使用...
  • 一、问题汇总 手机网页怎么制作? 怎么网页适应不同手机屏幕? H5网页设计到底该设计多大尺寸?...如何通过media媒体查询实现网页自适应屏幕? 怎么使用100%百分比做自适应布局? 如何使用js改变zoom缩放网页自适应手
  • 现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康,因为不仅要知道rem是个单位,更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB。 事故造成原因:1.px单位在PC上很流行,在...
  • 制作的网页除了在PC端浏览,在现在移动端量巨大的时代下,如何...解决方案在网页的中增加以下代码,让网页的宽度自动适应手机屏幕的宽度width=device-width :表示宽度是设备屏幕的宽度height=device-height :表...
  • 制作的网页除了在PC端浏览,在现在移动端量巨大的时代下,如何...解决方案在网页的中增加以下代码,让网页的宽度自动适应手机屏幕的宽度width=device-width :表示宽度是设备屏幕的宽度height=device-height :表...
  • 链接:https://www.uisdc.com/everysize#现在很多人是通过智能手机或平板电脑浏览网页,在网页设计上就要考量到如何让不同尺寸屏幕大小也能正常显示,以往会制作成电脑版和手机版两种格式,后来多半以响应式网页设计...
  •  在布局的时候需要考虑,不同大小的手机屏幕随着分辨率的变化,页面元素的尺寸和间距都相应变化,即可以实现等比例的布局。另外一个需要考虑的问题是,有些手机是 Retina 屏,其devicePixelRatio都大于1,这样
  • 手机版网站起码要实现一些基本的功能吧:1....所以这里,最好让网页的宽度自适应屏幕,还好,w3c在设计html的时候为我们考虑了这一点,只需一句话,就可以搞定,就是加上复制代码代码如下:,对于字体的话,我们就用e...
  • 页面适配

    2021-02-19 16:32:46
    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 HTML5---响应式页面前言一、在网页代码的头部,加入一行viewport...在网页的中增加以下这句话,可以让网页的宽度自动适应手机屏幕的宽度 <meta

空空如也

空空如也

1 2
收藏数 34
精华内容 13
关键字:

如何让手机网页自适应屏幕