解决PC端、移动端页面自适应性问题

时间 2019-11-30

标签解决移动页面适应性问题栏目无线繁體版

原文原文链接

其实，随着硬件和浏览器的不断更新，曾经的浏览器兼容已经再也不是开发者的噩梦。而移动H5开发逐渐成为一种主流，不断趋向于成熟。css

因此，咱们更须要加以注意的应该是PC端和移动端页面的适应问题，好比pc端多列变单列，导航栏变侧边栏...html

主要问题：web

开发时，咱们一般还须要考虑到不一样电脑屏幕尺寸，以及不一样手机屏幕大小等问题，解决当样式发生改变的状况，那么如何解决呢？django

解决：浏览器

主要是采用自适应、响应式设计来解决高度，宽度的，以及图片自适应问题app

具体能够参考阅读布局

https://www.jb51.net/web/459394.html字体

移动端

其实，移动端的自适应高度和宽度要更简单，就是要加入一行viewport标签url

首先，先了解H5页面的基本组成

1 <!DOCTYPE html>
2 　　<head>
3  　　　<meta charset="utf-8">
4 　　　　<title>title</title>
5 　　</head>
6 <body>
7 </body>
8 </html>

meta viewport模板（支持响应式布局）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 　　<meta charset="utf-8">
 5 　　<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 6 　　<meta content="yes" name="apple-mobile-web-app-capable">
 7 　　<meta content="black" name="apple-mobile-web-app-status-bar-style">
 8 　　<meta content="telephone=no" name="format-detection">
 9 　　<meta content="email=no" name="format-detection">
10 　　<title>标题</title>
11 　　<link rel="stylesheet" href="index.css">
12 </head>
13 <body> 这里开始内容 </body>
14 </html>

如上面的meta viewport模板所示，首先，在网页代码的头部，加入一行viewport标签：spa

viewport，是网页默认的宽度和高度。

该行代码表示，网页的宽度默认等于设备屏幕的宽度，原始缩放比例为1，即网页初始大小占屏幕面积的100%

重要概念理解

1：因为网页会根据屏幕宽度调整布局，因此不能使用绝对宽度的布局，也不能使用具备绝对宽度的元素。具体说，CSS代码不能指定像素宽度：width:xxx px；可指定百分比宽度：width: xx%；或者width:auto；

2：字体大小通常使用em，尽可能少使用px

3：尽可能使用流动布局

4：①自适应网页设计的核心，就是CSS3的引入的media query，多媒体查询模块，会自动探测屏幕宽度，而后加载相应的CSS文件

示例：<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="style.css" />，当屏幕小于400时，就加载style.css这个文件

5：②除了使用html标签加载CSS文件，还能够在现有CSS文件中加载

示例：@import url("style2.css") screen and (max-device-width: 800px)，当小于800px屏幕时，就加载style2.css文件

6：🌂除了使用html标签和css文件加载css文件，还能够直接在css经过@media来添加css样式代码

示例：@media screen and (max-width: 960px){　　body{background: #000;　　}

7：图片的自动缩放，比较简单。只须要一行CSS代码：

img{ max-width: 100%;}，建议根据不一样的屏幕分辨率，加载不一样大小像素的图片

结语：

移动端的自适应，大致上差很少就这么多，主要核心是利用@mediaQuery（多媒体查询），根据不一样的屏幕大小，实现不一样的布局

要了解更多关于移动端的H5开发，能够阅读其余博友的整理

浅谈