HTML5----响应式（自适应）网页设计

 

现在，很多项目都需要做响应式或者自适应的来适应我们不同屏幕尺寸的手机，电脑等设备，那么就需要我们在页面上下功夫，下面我就来说一下如何做响应式（自适应）的网页设计

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

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

在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度，下面是这些属性的解释：

　　1）width=device-width ：表示宽度是设备屏幕的宽度

　　2）initial-scale=1.0：表示初始的缩放比例，1.0就是占网页的100%

　　3）minimum-scale=1.0：表示最小的缩放比例

　　4）maximum-scale=1.0：表示最大的缩放比例

　　5）user-scalable=no：表示用户是否可以调整缩放比例

如果要兼容IE6/7/8的话，就要用css3-mediaqueries.js

1
2
3
<!--[if lt IE 9]> 
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->

2、宽度不要用绝对的

　　width:auto; / width:XX%;

3、字体大小是页面默认大小的100%，即16像素，不要使用绝对大小"px"，要使用相对大小“rem”

1
2
html{font-size:62.5%;}
body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; } 

　当然搭配媒体查询的样式会更好，比如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html{font-size:10px}　　　　　　10px==62.5%
 
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
 
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
 
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
 
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
 
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
 
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
 
@media screen and (min-width:800px){html{font-size:25px}}

不过如果在PC端，最好用min-width，max-width，在移动端最好用min-device-width和max-device-width

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

1
2
.left{ width:30%; float:left} 
.right{ width:70%; float:right;}

　像这样，用左浮动和右浮动，好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现

5、选择加载CSS

"自适应网页设计"的核心，就是CSS3引入的Media Query模块。自动探测屏幕宽度，然后加载相应的CSS文件

1
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" /> 

　这段代码的意思是：如果屏幕宽度小于600像素（max-device-width: 600px），就加载css600.css文件。

如果屏幕宽度在600像素到980像素之间，则加载css600-980.css文件

1
<link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" /> 

还有(不建议使用)：除了用html标签加载CSS文件，还可以在现有CSS文件中加载

1
@import url("css600.css") screen and (max-device-width: 600px); 

　　

6、CSS的@media规则（如果有需要就写）

1
@media screen and (max-device-width: 400px) {  .left{ float:none;} }

　当屏幕宽度小于400px的时候，就取消浮动

7、图片自适应，"自适应网页设计"还必须实现图片的自动缩放。

1
img {width: 100%;} 

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

1
img { width:100%; -ms-interpolation-mode: bicubic;} 

　或使用js--imgSizer.js　

1
2
3
4
addLoadEvent(function() { 
　　var imgs = document.getElementById("content").getElementsByTagName("img"); 
　　imgSizer.collate(imgs); 
});

　　

好，这样写出的网页就会自适应啦！　　

pc建站自适应的更多相关文章

  1. 转：移动建站工具（一）：分秒钟将Web网站移动化

      作者唐小引 移动建站工具Web移动化简易开发MobifyTOPMobile Joomla!MoFuseWordPress优化 摘要:时下移动端显然已是诸多企业都想要占领的重要阵地.但限于较小的屏幕 ...

  2. Enfold主题详解与实例视频教程 WordPress建站视频教程

    ENFOLD主题功能强大,同样的设置也相对较复杂,希望您在学习过程中也能多多加以练习.Enfold主题介绍:目前在ThemeForest网站,Enfold在WordPress主题销售排行中第2名,可见 ...

  3. 建站服务器的最优选择之Windows Or Linux

    转载于:http://www.0553114.com/news/detail-702287.html 不管是个人建站,还是中小型企业建站,选择一款合适的主机是站长朋友们共同的心愿.主机是选择Windo ...

  4. Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么（转）

    Web 建站技术中,HTML.HTML5.XHTML.CSS.SQL.JavaScript.PHP.ASP.NET.Web Services 是什么?修改 建站有很多技术,如 HTML.HTML5.X ...

  5. phpcms 初次建站心得

    最近要给客户建个网站,考虑到效率问题,直接找了个开源的phpcms,(现在被收购了,以前的时候我还知道是个开源的).由于对这个东西不熟悉,原来就是了解一些,php的建站系统,php的MVC框架.故此, ...

  6. WAP自助建站平台娃派宣布关闭 感谢建站之路有你的启蒙

    如题所示的这篇文章是我心血来潮在网上搜索到的,写的挺让我感同身受的,不妨先看一下原文吧. 原文 不知是偶然还是"冥冥定数",最后一次访问娃派建站(wap.ai)已有数十月之久了,突 ...

  7. 《Dotnet9》系列之建站-中文站最好WordPress主题，自媒体，博客，企业，商城主题一网打尽

    大家好,我是Dotnet9小编,一个从事dotnet开发8年+的程序员.本文介绍WordPress主题JustNews,本站Dotnet9既是使用WordPress + JustNews主题搭建而成的 ...

  8. 2020年B2B外贸建站的终极教程

    本文目标:按照本建站教程的顺序操作,能够实现:基于全球份额最大的建站系统“wordpress”,从零搭建一个B2B外贸网站,且建站成本每年小于1000元(如果不计算自己投入的人力成本的话). 模板站点 ...

  9. WordPress建站和搭独立博客

    之前有帮外面的公司建站的经历 不去管html css js 服务器脚本等 对于菜鸟新手而言, 一个WAMP + WordPress(博客程序)就够了 都弄好了再部署到云端服务器上 其实整个过程只是安装 ...

随机推荐

  1. Laravel - 上手实现 - 邮件发送

    Laravel 自带 SwiftMailer 库,集成了多种邮件API,可以很方便的实现邮件的发送. 我们使用到的是SMTP(Simple Message Transfer Protocol)简单邮件 ...

  2. WTF Python：有趣且鲜为人知的Python特性

    Python 是一个设计优美的解释型高级语言,它提供了很多能让程序员感到舒适的功能特性.但有的时候,Python 的一些输出结果对于初学者来说似乎并不是那么一目了然. 这个有趣的项目意在收集 Pyth ...

  3. react: typescript system params optimize

    1.system-params-service import paramCache from "../common/param-cache" import RequestPromi ...

  4. Centos8安装Docker提示：package docker-ce-3:19.03.8-3.el7.x86_64 requires containerd.io >= 1.2.2-3, but none of the providers can be installed

    Centos8安装Docker提示:package docker-ce-3:19.03.8-3.el7.x86_64 requires containerd.io >= 1.2.2-3, but ...

  5. pytorch 中的LSTM模块

  6. 使用STM8S i2c对TPS65987寄存器进行读写

    上图是TPS65987的i2c读写协议,和标准i2c协议有点出入,不过也不难理解,在读的时候i2c slave在发送数据过来之前会先发送1byte数据表示后面会有几个字节数据过来,在写的时候i2c h ...

  7. 米特运输——（dfs）

    米特是D星球上一种非常神秘的物质,蕴含着巨大的能量.在以米特为主要能源的D星上,这种米特能源的运输和储 存一直是一个大问题.D星上有N个城市,我们将其顺序编号为1到N,1号城市为首都.这N个城市由N- ...

  8. Linux源码安装步骤

    来源:https://www.cnblogs.com/benwu/articles/8436209.html 1. 获取源码 2. 查看INSTALL与README文件    (解压后查看INSTAL ...

  9. 一些软件的 Basic Auth 行为

    一个 WBEM 在2003年的bug I'm trying to access the WBEM service of the CIMOM on the ESX Server 3i and all m ...

  10. 异常：NoSuchFieldError: BEST_MATCHING_HANDLER_ATTRIBUTE

    出现的原因 pom 依赖之间不匹配导致 当前的 pom 调整后访问资源成功后面的 pom