标签：注意 scala char 基本 手动 image 三方 scree 大小
基本的概念：一个网站可以兼容多个终端，针对不同终端设置不同的样式。
优点：
缺点：
1. CSS3-Media Query（最简单的方式，但是无法满足很多需求）
2. 借助原生Javascript（成本高，不推荐使用）
3. 第三方开源框架（比如bootstrap,可以很好的支持浏览器的响应式布局）
在完成非响应式布局后，head中添加如下代码。设置meta标签来告诉浏览器，让视口宽度等于设备宽度，而且需要禁止用户缩放行为。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
这里视口的设置需要注意的是，视口就是可见的屏幕尺寸；设置视口时只设置宽度，而不在乎高度，这是因为高度由内容自动撑开。
具体含义如下：
CSS样式分为：内联式css样式、嵌入式css样式、外部式css样式
方式一：（嵌入式css样式——这种是不推荐的，这样会使得html页面代码太繁琐）：
<style type="text/css">
@media screen and (max-width:768px){
//当屏幕宽度小于768px时，加载这里的样式
}
@media screen and (min-width:368px){
//当屏幕宽度大于368px时，加载这里的样式
}
@media screen and (min-width:300px) and (max-width:600px){
//当屏幕宽度大于300px且小于600px时，加载这里的样式
}
</style>
方式二：（外部式css样式）
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="./font_icons/fonts.css">
<link rel="stylesheet" type="text/css" href="./css/common.css">
<link rel="stylesheet" media="screen and (max-width:768px)" href="./css/phone.css" />
<link rel="stylesheet" media="screen and (min-width:768px)" href="./css/tablet.css" />
<link rel="stylesheet" media="screen and (min-width:1024px)" href="./css/desktop.css" />
<link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/desktop_hd.css" />
</head>
注：书写顺序一定不能差
标签：注意 scala char 基本 手动 image 三方 scree 大小
原文地址：https://www.cnblogs.com/zhuochong/p/12058488.html
