如何让页面自适应屏幕

随着科技的进步，互联网设备已经不再局限于电脑，而出现了平板，手机，手表等产品。作为一个前端，在制作页面的时候必须要考虑到页面适应屏幕的问题。这篇和大家分享我平常工作中是怎么处理让页面自适应屏幕的。

如何写一个自适应网站

  • 01

    要让页面自适应屏幕，首先要制作好一个差不多完整的HTML作品。这里就做一个简单的示范，做一个导航栏。（因为经验不能上传文字过多的图片，只能截取部分了，这是一个demo作品）

  • 02

    在<head>中添加View代码。<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />这一部分是meta主要是针对移动端的。

  • 03

    使用F12控制台进入移动设备观看。可以看到这一行代码的在移动设备中起的作用。查看的方法是按F12，然后在控制台选项上方element左侧。

  • 04

    在css写作中，也尽量使用width:10%的方式，而不要直接使用px;除了字体以外的所有控件尽量都使用em来描绘大小，要不就留空不要写。

  • 05

    针对PC的浏览器，可以直接用 body{ width:100%; } 的写法，但是如果图片小于最后效果的话，会导致失真。所以一般不这么用。但是如果其他方法试过了都无法实现自适应的话（因为代码结构不同，难免出现无法实现的现象），这是强行自适应的方式。

  • 06

    另外一种方法是使用js，获取当前窗口的宽和高，然后将body主体进行重定义。利用函数document.body.clientHeight||document.documentElement.clientHeight;获取高度，利用函数document.body.clientWidth||document.documentElement.clientWidth;获取宽度。你要获取的是要实现自适应的div的值，将自适应部分用<div>框起来。（我这里用的是id=ResizeDiv）

  • 07

    写一个function，对ResizeDiv进行重定义大小并且重新载入。这里会根据窗体大小设置控制的高和宽。下面的window.onresize(){}当窗口大小改变的时候就触发事件；之所以要在window.onresize事件前加一个Resize()是为了防止他只执行一次。

赞 (0)

相关推荐

  • 移动页面自适应手机屏幕宽度

    网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设 ...

  • 360浏览器app怎么开启自适应屏幕功能?

    360浏览器开启自适应屏幕教程.我们在手机上用360浏览器查看电脑端网站的时候网页会放的特别大,对于这种情况还在纠结的朋友们不要担心了,今天小编就来教大家解决的方法. 1)我们先打开360浏览器APP ...

  • html5设置图片自适应屏幕宽度

    HTML网页的开发中,需要对大小不一的屏幕兼容,使图片在不同的设备中可以展示预期的效果.自适应屏幕的宽度,利用css中background属性可以实现 操作方法 01 新建一个HTML文件,代码如下图 ...

  • 如何利用Axure RP 8做出页面自适应元件

    Axure RP 8设计软件工具,可以根据不同的设备自适应:当在手机上显示,可以在手机上显示:如果在平板或电脑上显示,显示成不同的形式.下面利用一个实例说明这个自适应,操作如下: 操作方法 01 第一 ...

  • win7系统屏幕抖动怎么办？Win7电脑屏幕一直抖动的原因及解决方法

    win7系统屏幕抖动怎么办?Win7系统的电脑屏幕一直抖动,声音.程序运行则一切正常,这有可能是屏幕硬件的问题,也有可能是电脑设置不当引起的,还有可能是驱动不兼容造成的.下面就来介绍一下Win7电脑屏 ...

  • 华为手机屏幕下方的导航栏怎么设置显示或隐藏

    华为手机屏幕下方的导航栏怎么设置显示或隐藏

    今天给大家介绍一下华为手机屏幕下方的导航栏怎么设置显示或隐藏的具体操作步骤.1. 解锁手机后,找到桌面上的设置图标,打开.2. 在打开的设置页面,找到"系统"选项,打开.3. 在打 ...

  • 苹果平板ipad设置的屏幕使用时间密码忘了如何重置

    苹果平板ipad设置的屏幕使用时间密码忘了如何重置

    今天给大家介绍一下苹果平板ipad设置的屏幕使用时间密码忘了如何重置的具体操作步骤.1. 打开平板电脑上的设置图标,然后在打开的设置页面找到屏幕使用时间,打开.2. 在打开的屏幕使用时间乘客,点击下方 ...

  • 荣耀手机怎么开启双击唤醒屏幕，保护开机键

    在时候手机的时候,关闭屏幕再打开的时候,通常都是要按下开机键才可以唤醒屏幕的,但是这个键按多了容易坏,我们可以设置双击屏幕就可以唤醒屏幕. 下面,小8分享下如何开启手机双击唤醒屏幕功能 操作方法 01 ...

  • 小米8屏幕发黄解决办法

    我们在使用小米8手机时,手机可能会由于屏幕批次的不同,显示的效果也不一样.有时候我们会觉得屏幕会发黄,也就是暖色.那么小米8屏幕发黄怎么解决,本文将详细介绍. 操作方法 01 我们可以通过调节小米8手 ...