精华内容
下载资源
问答
  • 于是,网页设计师不得不面对一个难题:如何才能在 不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上,有的还达到了2000像素。 同样的内容,要在大小...

      随着网络的快熟发展,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在 不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上,有的还达到了2000像素。 同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。很多网站的做法是对不同终端设计多个网页,但这样会有很多维护的问题,在这 里我们可以设计一个简单的盒子,这个盒子可以识别不同的终端而显示不同的效果

    工具/原料

    • dm网页设计软件

    • ps图像处理软件

    方法/步骤

    1. 1

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

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

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

    2. 2

      由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。对图像来说也是这样。

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

      width:xxx px;

      只能指定百分比宽度:

      width: xx%;

      或者

      width:auto;

    3. 3

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

      例如:

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

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

    4. 4

      流动布局(fluid grid)

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

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

      .leftBar {float: left;width: 25%;}

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

    5. 5

      "自适应网页设计"的核心,就是CSS3引入的MediaQuery模块。

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

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

      END

    参考下面的例子——我称它为“盒子”

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <!-- viewport meta to reset iPhone inital scale -->

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

    <title>Demo: Responsive Design in 3 Steps</title>

    <!-- css3-mediaqueries.js for IE8 or older -->

    <!--[if lt IE 9]>

    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

    <![endif]-->

    <style type="text/css">

    body {

    font: 1em/150% Arial, Helvetica, sans-serif;

    }

    a {

    color: #669;

    text-decoration: none;

    }

    a:hover {

    text-decoration: underline;

    }

    h1 {

    font: bold 36px/100% Arial, Helvetica, sans-serif;

    }

    /************************************************************************************

    STRUCTURE

    *************************************************************************************/

    #pagewrap {

    padding: 5px;

    width: 960px;

    margin: 20px auto;

    }

    #header {

    height: 180px;

    }

    #content {

    width: 600px;

    float: left;

    }

    #sidebar {

    width: 300px;

    float: right;

    }

    #footer {

    clear: both;

    }

    /************************************************************************************

    MEDIA QUERIES

    *************************************************************************************/

    /* for 980px or less */

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

     

    #pagewrap {

    width: 94%;

    }

    #content {

    width: 65%;

    }

    #sidebar {

    width: 30%;

    }

    }

    /* for 700px or less */

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

    #content {

    width: auto;

    float: none;

    }

    #sidebar {

    width: auto;

    float: none;

    }

    }

    /* for 480px or less */

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

    #header {

    height: auto;

    }

    h1 {

    font-size: 24px;

    }

    #sidebar {

    display: none;

    }

    }

    /* border & guideline (you can ignore these) */

    #content {

    background: #f8f8f8;

    }

    #sidebar {

    background: #f0efef;

    }

    #header, #content, #sidebar {

    margin-bottom: 5px;

    }

    #pagewrap, #header, #content, #sidebar, #footer {

    border: solid 1px #ccc;

    }

    </style>

    </head>

    <body>

    <div id="pagewrap">

    <div id="header">

    <h1>Header</h1>

    <p>Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">related article</a>)</p>

    </div>

    <div id="content">

    <h2>Content</h2>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    </div>

    <div id="sidebar">

    <h3>Sidebar</h3>

    <p>textg</p>

    <p>fgs</p>

    <p>fgsg</p>

    <p>dg</p>

    <p>dfgfd</p>

    <p>测试测试测试</p>

    <p>sgrtg</p>

    <p>测试</p>

    <p>sgf</p>

    <p>text</p>

    </div>

     

    <div id="footer">

    <h4>Footer</h4>

    </div>

    </div>

    </body>

    </html>

    转载于:https://www.cnblogs.com/huojing/articles/3871209.html

    展开全文
  • 本文介绍了"自适应网页设计"的概念及制作思路和方法还有注意事项等,非常的详细,这里推荐给大家好好阅读,慢慢提高
  • 如何制作手机自适应网页 | 浏览:1885 | 更新:2014-04-23 12:20 将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单,可以利用meta标签声明。 工具/原料 ...

    如何制作手机自适应网页

    • |
    • 浏览:1885
    • |
    • 更新:2014-04-23 12:20

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

    工具/原料

    • sublime text

    方法/步骤

    1. 1

      打开你需要制作手机网页的html或者php等等网页源码文件。在<head></head>之间加入meta标签。

    2. 2

      向浏览器声明该网页为移动设备自适应网页的meta标签为:

      <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">

      <meta name="apple-mobile-web-app-capable" content="yes">

      <meta name="apple-mobile-web-app-status-bar-style" content="black">

      <meta name="format-detection" content="telephone=no">

    3. 3

      将以上标签加入之后保存,再用手机打开即是自适应网页了。

      END

    注意事项

    • 手机对应html和css优化需要自己注意一下

    转载于:https://www.cnblogs.com/honeynm/p/4370817.html

    展开全文
  • 一、了解什么是”自适应网页设计” 自从2010年,Ethan Marcotte提出了 “自适应网页设计”(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。 他制作了一个 范例,里面是...
    一、了解什么是”自适应网页设计”
    自从2010年,Ethan Marcotte提出了 “自适应网页设计”(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。

    他制作了一个 范例,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素,则6张图片并排在一行。

    如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。

    如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。

    如果屏幕宽度在400像素以下,则6张图片分成三行。

    mediaqueri.es上面有更多这样的例子。

    这里还有一个 测试小工具,可以在一张网页上,同时显示不同分辨率屏幕的测试效果,我推荐安装。

    二、需要允许网页宽度自动调整

    “自适应网页设计”到底是怎么做到的?其实并不难。

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

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

    所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用 css3-mediaqueries.js。

    三、在进行设计的时候不能使用绝对宽度

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

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

    width:xxx px;

    只能指定百分比宽度:

    width: xx%;

    或者

    width:auto;

    四、相对大小的字体

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

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

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

    h1 {
    font-size: 1.5em;
    }

    然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

    small {
    font-size: 0.875em;
    }

    small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

    五、流动布局(fluid grid)或瀑布流

    “流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。

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

    .leftBar {
    float: left;
    width: 25%;
    }

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

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

    六、选择性加载CSS

    “自适应网页设计”的核心,就是CSS3引入的 Media Query模块。

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

    上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

    如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

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

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

    七、CSS的@media规则

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

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

    .column {
    float: none;
    width:auto;
    }

    #sidebar {
    display:none;
    }

    }

    上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

    八、图片的自适应(fluid image)

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

    这只要一行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);

    });

    不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有 很多方法可以做到这一条,服务器端和客户端都可以实现。
    展开全文
  • 如何制作自适应网站

    2019-09-15 22:25:03
    自适应网站已经成为现互联网时代的主流网站,自适应网页...今天给大家讲下如何利用建站宝盒制作自适应网站。 建站流程:模板设置>基本资料>网站栏目>编辑内容>发布网站>推广网站 1.进入界面 ...

    自适应网站已经成为现互联网时代的主流网站,自适应网页布局的改革,让网站焕然一新,赋予了网站新的活力与更精美的展现。今天给大家讲下如何利用建站宝盒制作自适应网站。

     

    建站流程:模板设置>基本资料>网站栏目>编辑内容>发布网站>推广网站

    1.   进入界面

     

    网站建设

     

    2.   选择网站模板,安装模板

     

     建站宝盒

     

    网站模板

     

    3.   编辑网站

     

    自助建站工具

     

    双击栏目,更改内容

     

    网站制作

     

    点击首页,可以管理更改网站所有内容栏目

     

    网站编辑

     

    4.编辑完成,进行发布

     

    自适应网站

     

    程序代码的建站者而言,使用建站宝盒进行网站建设是一个不错的选择,操作简单方便,无需懂程序编码就能进行自建站。

     

    免费注册体验建站宝盒:http://www.iisp.com/user/register.php?s=hyc

    转载于:https://my.oschina.net/wwwiispcom/blog/816516

    展开全文
  • 合理使用负边距技术,可以帮助我们创建很多有意思的布局,比如自适应浏览器宽度的流体布局。国外关于使用负边距创建这类布局的技术文档,我看到的最早是04年 Ryan Brill 发表在 A List Apart 上的 《Creating Liquid...
  • 欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。关于如何解决网页制作中宽高自适应的问题1 问题描述在假期...
  • 今天春哥技术博客和大家一起分享下当下如何制作一个自适应手机、电脑、ipad的网页方法,手机上网的用户已经越来越多,已经赶超PC端。随着2G、3G、4G、免费WIFI和无线基站的不断普及,越来越多的人开始使用手机上网。...
  • 如何网页自适应电脑屏幕分辨率

    千次阅读 2015-07-26 10:02:15
    很多人会遇到这样的问题,当你在自己的电脑上精心制作网页,却发现在别人的不同分辨率的电脑上浏览你的页面时,自己的网页排版乱得一塌糊涂,或者被拉伸,或者被压缩,要不就是不能完整显示在屏幕内。这是为什么呢...
  • 如何使网页自适应电脑屏幕分辨率?

    千次阅读 2014-08-11 00:14:48
    在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。...下面我们以网页爱好者的常用工具Dreamweaver(以下简称DW)为例,列出几个网页制作初学者较常见的网页布局问题以及解决方法,希望对
  • 通过Google搜索iframe 自适应高度,结果5W多条,搜索iframe 高度自适应,结果2W多条。 我翻了前面的几十条,刨去...而这几篇原创里面,基本上只谈到如何自适应静的东西,就是没有考虑到JS操作DOM之后,如何...
  • 欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。1 问题描述在假期里较系统的学习了html的静态网页制作...
  • 内容提要:如何用CSS控制图片自适应大小的方法,网页制作技巧实例解决:用CSS控制图片自适应大小。图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们...
  • 制作一个登录界面时遇到了这样一个问题,背景...1如何让背景图片完整的铺满整个屏幕,并且随着浏览器屏幕的不同自适应 2如何让登录内容始终居中,这样就是登录内容到屏幕顶端的距离的自适应。 解决方法:问题1 将...
  • CSS 自适应导航菜单

    2019-09-30 20:05:00
    以前我写了一篇关于如何自适应网页制作教程手机导航菜单,现在我又摸索出一种无需JS脚本的自适应导航菜单,它采用纯粹的语义化HTML5标签来完成。该菜单可以左对齐,居中或右对齐,也不像上一种方法中需要点击来...
  • 如何制作炫酷的可自适应不同分辨率的仪表板大屏? 用硕迪科技推出的单机免费版的snowbi只需要三步。 第一步:连接数据库 第二步:配置sql系统数据集 第三步:拖拽组件设计仪表板大屏 snowbi提供了很多种组件,...
  • 在学习网页制作的过程中,如何根据不用的设备让网页界面能够显示出最佳的效果,这是让广大初学者为之烦恼的事情,但是今天如果你看了这篇博文,你的忧虑将一扫而光,会让你感受到前端的乐趣。 首先,如何实现这样的...
  • 将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单,可以利用meta标签声明。 工具/原料 sublime text 一方法/步骤 打开你需要制作手机网页的html或者php等等网页源码文件。在&...
  • 小谈移动端自适应

    2016-11-13 19:42:33
    多的话就不说了,反正WebApp现在是很火,PC端网页已经远远不能满足大家的胃口,今天来谈谈如何制作一个WebApp(也可称之为自适应Web)。 现在一般有两种方式: 当然我们开头的meta标签是不能少的。 <metaname=...
  • 分类:网页制作 有时候我们的网站需要引入其他网站的东西,比如评论,这时候就需要使用iframe,那么在不知道其高度的情况下如何使其能够自适应呢?下面用js代码实现。<iframe id=...
  • 制作网页列表的分页必不可少,显示的列表条数也不一样,让我们一起来看看如何让分页标签根据给定的分页自动居中呢。 对<ul>标签设置样式为:{ display: table margin:40px auto;} 对<li>标签设置样式...

空空如也

空空如也

1 2 3 4
收藏数 66
精华内容 26
关键字:

如何制作自适应网页