`
月亮不懂夜的黑
  • 浏览: 156070 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

页面元素自适应

阅读更多

在html5下使得页面自适应,以满足不同浏览器下的大小适应的问题。

1、对文本的处理增加的内容

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;' name='viewport' />
<meta http-equiv='pragma' content='no-cache' />
<meta http-equiv='cache-control' content='no-cache' />
<meta http-equiv='expires' content='0' />

 主要部分已使用红色标注

2、对图片的处理

在页面中增加样式控制

<style type='text/css'>
     img { width: 100%; }
</style>

 3、不使用绝对宽度

由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

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

width:xxx px;

只能指定百分比宽度:

width: xx%;

或者

width:auto;

 

我所使用的将页面所有图片自适应的方法。要求:小于屏幕宽度的图片正常大小,大于屏幕宽度的图片按照屏幕宽度展示。目前已测试过ie9,chrom,android浏览器和ipad浏览器。

<SCRIPT LANGUAGE="JavaScript">
<!--
	function initPage(){
		 var objs = document.getElementsByTagName('img');
		 var clientWid = document.documentElement.clientWidth;
            for(var i=0;i<objs.length;i++)  
            {  
			   if(objs[i].width > clientWid){
				 objs[i].style.width = '100%';
			   }
            } 
	}
//-->
</SCRIPT>

 使用该方法的弊端,需要图片都加载完之后,才能处理。当页面比较大时,速度会比较慢。

2
0
分享到:
评论

相关推荐

    通过JAVAScript实现页面自适应.doc

    页面自适应的实现原理是通过 JavaScript 获取屏幕的宽高,然后根据屏幕大小调整页面元素的宽高和位置。首先,需要获取屏幕的宽高,可以使用 `document.body.offsetHeight` 和 `document.body.offsetWidth` 获取当前...

    jsp页面iframe高度自适应的js代码.docx

    jsp 页面 iframe 高度自适应的 js 代码是指在 jsp 页面中使用 iframe 元素,並且使其高度能够自适应内容的高度。这种技术在实际应用中非常有用,例如在某些网页中,我们需要在 iframe 中嵌入一个内嵌页面,并且使其...

    iframe根据页面内容自适应高度和宽度

    本篇文章将详细探讨如何实现`iframe`根据页面内容自适应高度和宽度。 首先,我们需要理解`iframe`的基本结构。一个简单的`iframe`标签如下: ```html &lt;iframe src="http://example.com" width="500" height="300"&gt;...

    使用postcss-px2rem插件把px转变为rem,并配合给html根元素设置fontsize,来实现页面的自适应效果

    "使用postcss-px2rem插件把px转变为rem,并配合给html根元素设置fontsize,来实现页面的自适应效果"这一主题,正是解决这个问题的一种常见方法。下面我们将详细探讨这一技术栈中的各个组成部分。 首先,`px`是像素...

    页面自适应

    1. **响应式设计(Responsive Design)**:响应式设计是页面自适应的核心,它允许网页布局、图片和媒体元素根据用户的设备屏幕大小进行动态调整。通过使用弹性网格布局、媒体查询和流式图像等技术,网页可以灵活地...

    影视APP下载页面自适应html源码.zip

    标题中的“影视APP下载页面自适应html源码.zip”表明这是一个包含了HTML源代码的压缩文件,主要用于构建一个能够适应不同设备屏幕尺寸的影视应用下载页面。这个页面的设计目的是确保在手机、平板电脑或桌面电脑等...

    基于html5的自适应响应试404错误页面 v7.1

    【标题】:“基于HTML5的自适应响应式404错误页面 v7.1”是一个设计精良的网页模板,专为现代网站提供一个友好且功能丰富的错误页面解决方案。这个模板充分利用了HTML5的新特性,确保在不同设备上都能呈现出优秀的...

    iframe跨域常用问题和iframe页面自适应

    本篇文章将深入探讨两个关键知识点:`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念,它限制了浏览器从一个源获取另一个源的资源,以保护用户的安全。当`iframe...

    前端页面实现自适应

    比如实际浏览器 2732 宽 同样设置1rem ,那根元素要设置多少,使俩者比例一致 1366:100=2732:x 得x=200 html设置font-size=200px 而其他元素设置的rem不用变化 var deviceWidth(不考虑兼容性可使用vw,vh获取视图...

    小清新外星人404页面,自适应404页面

    404页面是网站设计中的一个重要元素,当用户尝试访问不存在的网页时,服务器会返回一个404错误状态码,并显示相应的404错误页面。这个“小清新外星人404页面”显然是一个设计独特的404错误页面,它的特色在于采用了...

    Reframejs是一个javascript插件让非自适应元素变成自适应

    总的来说,`Reframe.js`是一个简单且实用的工具,可以帮助开发者快速解决页面中非自适应元素的问题,提升网页的响应式设计。通过合理的配置和适当的优化,它可以成为你构建跨平台、响应式网页的得力助手。

    remjs移动端页面满屏H5自适应方案

    总结来说,rem移动端页面满屏H5自适应方案是一种基于CSS3 rem单位的响应式布局技术,通过设置根元素的字体大小和使用rem单位,能够实现跨设备、跨分辨率的页面自适应。这个方案在实际开发中具有广泛的应用,特别是在...

    精美大气的自适应APP下载页HTML源码.zip

    在这款自适应页面中,CSS将确保不同尺寸屏幕上的布局都能恰当显示,实现响应式设计。使用媒体查询(@media rule)可以根据设备特性,如屏幕宽度,调整样式,使页面在手机、平板和桌面电脑上都能良好显示。此外,CSS...

    手机端 物流页面自适应布局 .zip

    通过使用媒体查询(Media Queries)、百分比单位、弹性盒模型(Flexbox)或者网格系统(Grid),开发者可以实现页面元素在不同屏幕尺寸下的灵活布局。 接下来,我们讨论一下“字数自适应”。在物流页面中,可能会...

    iframe自适应高度(DOM动态操作)

    ### iframe自适应高度(DOM动态操作) #### 概述 在网页开发中,`iframe`是一种常用的技术,用于在一个HTML页面中嵌入另一个HTML页面。然而,在实际应用中经常会遇到一个问题:即`iframe`的高度与内嵌页面的实际...

    Iframe 框架自适应被嵌入页面高度

    Iframe的高度自适应是一项关键的技术,确保被嵌入的页面能够完全展示,避免出现滚动条或者内容被截断的情况。本文将深入探讨如何使用JavaScript来控制Iframe框架自适应被嵌入页面的高度。 首先,我们要理解为什么...

    一款简约的手机APP自适应下载界面HTML源码源码资源下载整理.zip

    在这个压缩包中,你将找到实现这种自适应界面的关键元素和布局。 首先,我们要理解“自适应”(Responsive)的概念。自适应网页设计是指网页能够根据用户设备的屏幕尺寸和方向自动调整布局、内容和图片,提供最佳的...

    简约自适应404错误页面

    "简约自适应404错误页面"项目提供了一个简洁且能适应不同设备屏幕的404错误页面模板。 首先,我们来看`index.html`文件,这是整个项目的入口点,包含了HTML代码。HTML(HyperText Markup Language)是网页内容的...

    CSS3自适应浏览器页面框架布局代码

    本资源“CSS3自适应浏览器页面框架布局代码”旨在帮助开发者创建适应各种屏幕尺寸和设备的网页,确保在不同浏览器上的一致显示效果。 首先,CSS3中的媒体查询(Media Queries)是实现自适应布局的关键。媒体查询...

Global site tag (gtag.js) - Google Analytics