澳门银河官网-新澳门银河官网官方网站!

新澳门银河官网

新澳门银河官网


CHIFENG DINGHAO ZHIYE JISHU XUEXIAO

全国咨询热线
0476-2892015
新澳门银河官网,赤峰计算机学校!
当前位置:首页 > 教育教学> 实战课

三步完成自适应网页设计

人气:   发表时间:2017-4-12 9:57:24   【

响应式网页设计最近很受欢迎,如果您的曝光率较低,请参阅响应式网站。当然,对于新手来说听起来有点复杂,但它比你想象的要简单得多。这是一个快速教程,介绍如何适应网页和媒体查询的基础知识(假设您有css基础)。

查看演示演示

第1步:元标记

为了适应屏幕,许多移动浏览器会将HTML页面放置在更大的视口宽度(通常大于屏幕宽度),您可以使用视口元标记设置。以下视口元标记告诉浏览器视口宽度等于设备屏幕宽度,并且不进行初始缩放:

TR

IE8及更早版本不支持媒体查询,可以使用media-queries.js或response.js脚本实现。

TR 第2步.HTML结构

在此示例中,页面布局包括标题,内容,侧边栏和
页脚。标题的固定高度为180px,内容宽度为600px,侧边栏宽度为300px。

TR

TR

步骤3.媒体查询

CSS3媒体查询是响应式网页设计的关键。它类似于高级语言中的if条件语句,它告诉浏览器基于不同的视口宽度(这里等于浏览器宽度)呈现网页。

如果视口宽度小于或等于980px,则以下规则生效。

这里,容器的绝对宽度更改为百分比显示,这使页面布局更加灵活。

/* * for980pxorless / @mediascreenand(max-width: 980px){#pagewrap { 宽度: 94%; } #内容{ 宽度: 65%; } #sidebar { 宽度: 30%; } }

如果视口宽度小于或等于700px,请将#content和#sidebar widths设置为auto(auto)并删除其float(float),以使其成为完整版本。

/* * for700pxorless / @mediascreenand(max-width: 700px){ #内容{ 宽度:自动; 浮点数:无; } #sidebar { 宽度:自动; 浮点数:无; } }

当视口宽度小于或等于480px(例如手机屏幕)时,将#header高度设置为auto,将h1的字体大小设置为24px,并隐藏#sidebar。

/* * for480pxorless / @mediascreenand(max-width: 480px){ {的#header 高度:自动; } H1 { 字体大小: 24px; } #sidebar { 显示:无; } }

TR

澳门银河官网版权声明书:
本网站的所有内容版权归澳门银河官网所有,不允许复制及其他任何形式使用。
对未经许可擅自使用者,本校保留追究其法律责任的权利。

在线客服

招生咨询
点击这里给我发消息
其他咨询
点击这里给我发消息