网页自适应技巧分享

最新推荐文章于 2024-04-11 16:05:19 发布

小Superman

最新推荐文章于 2024-04-11 16:05:19 发布

阅读量662

点赞数 1

本文链接：https://blog.csdn.net/wxy0123450/article/details/81275710

版权

如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上，有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的做法是对不同终端设计多个网页，但这样会有很多维护的问题，这样采用自适应会更好些。屏幕不断伸缩的情况下，网页会根据屏幕的大小自动调整信息展示，不同的视感冲击，感觉很酷炫，出于好奇和新鲜感，自己试着研究了下。

1、什么是自适应

自适应设计（Responsive Design）是指创建网站时仅用一套代码即可令它适应各种不同的屏幕尺寸。2010年，Ethan Marcotte提出了”自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

2、允许网页宽度自动调整

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

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

网页默认等于屏幕宽度，原始缩放比例为1.0，即网页初始大小占屏幕面积的100%。

浏览器推出了“viewport meta”标签，许多移动浏览器现在都支持这个标签，W3C 协议定义 viewport meta 目前还属于草案，很多人都會在html head 处加上 viewport 这个meta data。

viewport设置属性如下：

width：可设定数值，或者指定为 device-width height：可设定数值，或者指定為 device-height initial-scale：第一次进入页面的初始比例 minimum-scale：允许缩小最小比例 maximum-scale：允许放大最大比例 user-scalable：允许手指缩放，1 or 0 (yes or no)

3、CSS3 Media Query

自动探测屏幕宽度，然后加载相应的css文件

media queries是一个非常好用的、强大的工具，它可以实现样式跟随屏幕分辨率而定。

自适应设计的关键是根据屏幕的宽度（width）来实时加载备选的样式或增加特定的样式。

Media Query的使用方法首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

参数解释：

width = device-width：宽度等于当前设备的宽度 initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为1.0） maximum-scale：允许用户缩放到的最大比例（默认设置为1.0） user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）使用： @media 设备类型 and （设备特性）{样式代码}

4、HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>foodsense</title>
    <link rel="stylesheet" type="text/css" href="common.css">
</head>
<body id="home-page">
<div id="wrap">
    <header role="masthead"><h1 id="branding">Food Sense</h1>
        <nav>
            <ul>
                <li id="t-tastemakers"><a href="#">Taskmakers</a></li>
                <li id="t-blog"><a href="#">Blog</a></li>
                <li id="t-vendors"><a href="#">The A-List</a></li>
                <li id="t-contribute"><a href="#">Contribute</a></li>
                <li id="t-about"><a href="#">About</a></li>
            </ul>
        </nav>
    </header>
    <div id="content"></div>
</div>
</body>
</html>

5.CSS代码

以下是CSS部分代码展示

/*大一点的PC*/
        @media only screen and (min-width: 1176px) {
            body {
                width: 1080px;
            }

            #content {
                float: right;
                width: 896px;
            }
        }

        /*retina 屏幕 图片要显示的更清晰 需要两倍大的图片*/ /*最小设备的像素比 设定为2 device物理设备-pexil像素-ratio 物理像素点 */
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            header h1#branding {
                background-position: left bottom;
                background-size: 120px auto;
            }
        }

        /*媒体选择器 手机*/
        @media only screen and (max-width: 767px) and (max-width: 480px) {
            body {
                width: 480px;
                padding: 0;
            }

            header[role="masthead"] {
                width: 100%;
                margin: 20px 0;
            }

            header h1#branding {
                margin-left: 20px;
            }

            nav {
                top: 65px;
                right: 25px;
                width: 315px;
                height: 20px;
                font-size: .75em;
                background: transparent;
                border-bottom: none;
                box-shadow: none;
            }

            nav ul {
                position: absolute;
                right: 0;
            }

            nav li {
                display: inline;
                margin: 0;
            }

            nav a {
                float: left;
                margin: 0 0 0 4px;
                padding: 5px 5px 0 5px;
            }
        }

        /*竖着拿手机*/
        @media only screen and (max-width: 480px) {
            header[role="masthead"] {
                width: 100%;
                margin: 69px 0px 29px;
            }

            body {
                width: 320px;
                padding: 0;
            }

            header h1#branding {
                margin: 0 auto;
            }

            nav {
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                font-size: .75em;
                border-bottom: 1px solid #E5E5E5;
                box-shadow: 0 1px 0 #f5f5f5;
            }

            nav li {
                display: inline;
                margin: 0;
            }

            nav li#t-tastemakers a, nav li#t-blog a, nav li#t-vendors a, nav li#t-contribute a, nav li#t-about a {
                background-image: none;
            }

            nav a {
                float: left;
                margin: 0;
                padding: 16px 7px 6px;
            }
        }

在HTML结构中，我们写的最多的就是div。好像哪个地方不用div，心里就觉得不舒服，有时候更多的使用div就会给我们写CSS带来不必要的麻烦。在上面的HTML结构中，我们可以看到header,nav标签，在HTML结构中使用语义化标签是好的选择，这样，结构更好,更利于搜索引擎的抓取（SEO的优化）和开发人员的维护(可维护性更高,因为结构清晰,so易于阅读)，更有利于特殊终端的阅读（手机,个人助理等）。制作一个响应式网站，就相当于有了三个网站，电脑、手机、平板都能完美显示。网站的版块可随着设备屏幕的不同尺寸自动改变位置，网站文字可以在不同设备显示合适的大小，无需让用户将局部放大、缩小查看（这不就是我们追求的增强用户体验么）。让使用不同设备访问的用户都能获得最佳的浏览体验。响应式设计可以为电脑、手机、平板等不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，已成为大势所趋。

结语

文章有描述不当的地方，跪求批评指正，互相学习。

小Superman

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
网页自适应技巧分享

如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上，有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站的做法是对不同终端设计多个网页，但这样会有很多维护的问题，这样采用自适应会更好些。屏幕不断伸缩的情况下，网页会根据屏幕的大小自动调整信息展示，不同的视感冲击，感觉很...
复制链接

扫一扫