自适应一

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

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

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

在页面里面使用元素时千万不要使用绝对值,例如:

CSS代码不能指定像素宽度:

  width:xxx px;

只能指定百分比宽度:

  width: xx%;

或者

  width:auto;

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

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

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

  h1 {
    font-size: 1.5em;
  }

流动布局,则使用 float:left; 否则内容会显示在一行,

另外,绝对定位(position: absolute)的使用,也要非常小心。

<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文件。

除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

  @import url("tinyScreen.css") screen and (max-device-width: 400px);

同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

  @media screen and (max-device-width: 400px) {

    .column {
      background-color:red;
    }

  }

除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放

这只要一行CSS代码:

  img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效,所以可以写成:

  img, object { max-width: 100%;}

老版本的IE不支持max-width,所以只好写成:

  img { width: 100%; }

此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令

  img { -ms-interpolation-mode: bicubic; }

或者,Ethan Marcotte的imgSizer.js

  addLoadEvent(function() {

    var imgs = document.getElementById("content").getElementsByTagName("img");

    imgSizer.collate(imgs);

  });

时间: 2024-10-25 21:27:06

自适应一的相关文章

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

网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. 首先解释该标签的含义: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, max

前端 css 垂直居中及自适应问题

此css作用为将下面div结构中的Container-fluid背景自适应屏幕,content自适应居中 1.Div结构 all Head Container-fluid Content Under <div id="all">   <div  class="head" style="height: 81px;width: 100%;min-width: 1000px;position: relative;">      

WordPress解决优酷、土豆视频移动端观看问题并自适应

转:https://www.xhsay.com/wp-iframe-handler-youku-tudou.html 虽然WordPress能直接插入优酷.土豆的视频但是无法在移动端观看,于是乎笨笨就开始各种折腾终于找到了合适的解决办法另外在说一句支持移动端自适应哦. 函数代码 在主题函数文件function.php里面添加以下代码即可,保证在最后一个?>之前就好了 //Youku function wp_iframe_handler_youku($matches, $attr, $url, $

firemonkey 手机屏幕自适应程序问题

我是新手.在我才学了2个星期的时候,那个白痴老板说什么手机屏幕自适应程序,我当时不能理解呀,觉得用Delphi的布局设计不就行了吗.结果他说:我就是想让控件内容什么的放在小屏幕手机上也不出来.我就说,那用布局layout.结果那个傻x又是画控件关于屏幕的位置,又是记录控件的位置,整了一大套.整个把我给整晕了,新手伤不起啊,我不知道Delphi xe5有一个控件布局叫ScaledLayout,结果捣鼓了很长时间.我在Delphi交流群里说这个功能时,大家都说我想多了.唉 ,没办法自己又把控件布局什

TCP之Delay ACK在Linux和Windows上实现的异同-Linux的自适应ACK

关于TCP Delay ACK的概念我就不多说了,到处复制粘贴标准文献以及别人的文章只能让本文篇幅加长而降低被阅读完的欲望,再者这也不是什么论文,附录参考文献几乎很少有人去看,所以我把这些都略过了. 和风吹的干皮鞋,吹的断愁绪吗? 写完本文后的补充: 这段话是我写完本文后补上去的.本来我想把这篇文章控制在2000字以内,或者更少的,800-1000字以内,无奈还是说多了...今天心情非常好,因为我竟然在梦里把三亨利之战的细节搞清楚了,迄今,我觉得自己对于西洋史的认知更近了一步,可以说今天是一个里

MYCNCART 自适应主题模板 MCCThemes-001 安装教程

附件里介绍了 MYCNCART 自适应主题模板 MCCThemes-001 通过FTP进行安装及配置的具体步骤,欢迎各位友人下载使用. 安装教程下载地址 http://pan.baidu.com/s/1gd1xfJ9

UI_11 自定义UITableViewCell、Cell的高度自适应

UITableViewCell很难满足我们的需求,因此,CustomCell(自定义单元格)至关重要.下面将通过一个例子演示自定义Cell.第二部分演示根据文本内容自适应Label.Cell高度. 第一部分 CustomCell的创建 1.创建DemoTableViewController,继承自UITableViewController,并设置其为window的根视图 AppDelegate.m - (BOOL)application:(UIApplication *)application

HEALTHY LIFE OPENCART 自适应主题模板 ABC-0053

HEALTHY LIFE OPENCART 自适应主题模板 ABC-0053 Features : Compatible with the most common browsers: FireFox 1.5-3.5.6+, IE8+, Safari 3.2 +, Opera, Google Chrome. Designed with luxurious colors Suitable for shop selling: Healthy, medical, vitamin, drug store

移动页面自适应

手机网页自适应不使用px使用em就perfect(em use  on everywhere) css media query(set root element "em" value)

Start – Modern minimalist OpenCart 2.X 自适应主题模板 ABC-0573-03

模板特性 兼容浏览器IE9, IE10, IE11, Firefox, Safari, Opera, Chrome OpenCart版本OpenCart 2.0.x, OpenCart 1.5.x, OpenCart 1.5.6.x, OpenCart 1.5.5.x, OpenCart 1.5.5 包含文件Layered PSD, PHP Files, CSS Files, JS Files START – MODERN MINIMALIST OPENCART 2.X 自适应主题模板 ABC-