创建自适应网页

转载 2015年07月08日 21:19:10

网页适配

1.允许网页宽度自动调整

<meta name='viewpore' content="width=device-width,initial-scale=1">

2.不适用绝对宽度

1.css代码不能指定像素宽度
width:xxx px
只能制定百分比宽度
width:xx%
或者
width:auto

3.相对字体的大小

body{
font:normal 100% Arial
}

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

h1{
font-size:1.5em;
}

然后h1的大小是默认大小的1.5倍,即24像素

4.流动布局

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

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

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

5.谨慎是用绝对定位

6,自适应网页射击的核心,就是css3引入的Media_Query模块.

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

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

7.css的@media规则
同一个css文件中,也可以根据不同的分辨率,选择应用不同的css规则

@media screen and (min-device-width:400px){
.col{
float:left;
width:auto;
}

}

8.图片的自适应

自适应网页设计必须实现图片的自动缩放
其实只需要一行代码

img{max-width:100%}

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

img{width:100%}

自适应网站设计的核心原理

自适应网站设计的核心原理
  • HornedReaper1988
  • HornedReaper1988
  • 2015年01月31日 19:30
  • 1912

如何设计自适应屏幕大小的网页

随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机...
  • ding_dq
  • ding_dq
  • 2017年02月17日 12:48
  • 6821

HTML5----响应式(自适应)网页设计

第一步:
  • damys
  • damys
  • 2014年04月23日 14:55
  • 125103

网页自适应屏幕宽度

随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页内容? 手机的屏幕比...
  • ithouse
  • ithouse
  • 2014年09月15日 17:27
  • 5157

自适应HTML页面源码

之前做一个简单的界面,需要自适应界面大小,下面是网上找的一个demo,不需要任何依赖文件就能跑的。   Demo: Responsive Design in 3 Steps ...
  • qq_28379809
  • qq_28379809
  • 2017年10月20日 16:55
  • 109

如何让网页自适应所有屏幕宽度

随着网络的快熟发展,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通...
  • NCZB007
  • NCZB007
  • 2017年03月03日 15:18
  • 12770

如何去设计一个自适应的网页设计或HTMl5

如今移动互联网随着3G的普及,越来越火爆,更多需求跟随而来!APP应用市场和APP应用数量成倍成倍的增长!从而给移动互联网带来新的挑战!   移动设备正超过桌面设备,成为访问互联网的最常见终端。...
  • u012499210
  • u012499210
  • 2016年11月23日 19:48
  • 3087

手机web——自适应网页设计(html/css控制)

一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。 meta name="viewport" conte...
  • woshinia
  • woshinia
  • 2014年02月11日 17:39
  • 7532

将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单,可以利用meta标签声明。 工具/

打开你需要制作手机网页的html或者PHP等等网页源码文件。在之间加入meta标签。 向浏览器声明该网页为移动设备自适应网页的meta标签为: 3 将以上标签加入...
  • K_Men
  • K_Men
  • 2017年01月16日 11:21
  • 781

表格自动适应浏览器大小及DIV浮动设计(页面自适应浏览器大小)

一、表格自适应浏览器大小       之前写了个页面,将width和height值给定死了,这样导致浏览器缩小时,表格不会跟着自动适应浏览器大小。       解决方法:       1.一般是给...
  • yuzongtao
  • yuzongtao
  • 2014年11月01日 16:29
  • 3757
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:创建自适应网页
举报原因:
原因补充:

(最多只允许输入30个字)