图文讲解-响应式设计
Posted 张员外讲编程
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图文讲解-响应式设计相关的知识，希望对你有一定的参考价值。
本节是第三讲的第一小节，从本节开始为大家介绍CSS相关的知识，在学习本讲前你需要先了解html有关知识，如对HTML不了解，请参见视频课程第二讲网页前端HTML。
我们之所以能在浏览器看到形形色色的网页，主要是浏览器的渲染引擎根据CSS样式渲染出来的效果。浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。
内核分类
Trident：IE内核Trident(又叫MSHTML)，是微软开发的一种排版引擎。IE内核无法在windows操作系统之外的其他操作系统上使用，所以不能跨平台使用。Trident内核的常见浏览器有： IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）、IE11（Trident 7.0）。
Gecko：Firefox内核，Netscape6开始采用的内核。Gecko也是一个跨平台内核，可以在Windows、 BSD、Linux和Mac OS X中使用。
Webkit：Safari内核，Chrome内核原型，它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。2008 年谷歌公司发布 chrome 浏览器，采用的 chromium 内核便采用了 Webkit。
Blink：Blink是一个由Google和Opera Software开发的浏览器排版引擎，这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，2013年在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。
双核浏览器（Dual core browser）
双核浏览器，就是有两个内核的浏览器。由于IE浏览器在国内的普及率非常高，所以造成了很多网上银行和支付系统只支持IE的Trident内核，其他浏览器访问根本无法进行正常支付和转账等业务。而WebKit内核的非IE浏览器以更高的性能和更好的用户体验拥有了越来越多的用户。于是双核浏览器应运而生，在不用网上交易的一般网站，使用速度快的WebKit内核访问，这就是所谓的“高速模式”；在访问支付宝或者网上银行的时候，使用Trident内核的“兼容模式”来进行业务。国内常见浏览器：QQ浏览器、360浏览器、搜狗浏览器、傲游浏览器、猎豹浏览器等。
所以，我们在做网页设计的时候需要考虑更多的是各个浏览器的适应情况。以下是根据国外statcounter网站关于桌面浏览器和移动端浏览器2019年至2020年一月份的统计结果。
从浏览器的占有率来看，Chrome浏览器已经占了半壁江山，所以我们在设计网页的时候一定要安装chrome浏览器来做测试。
以下是显示分辨率的统计数字，统计数据来源于百度统计，统计截止日期到2020年2月。
从以上的数据来看，PC端分辨率使用人数从高到低排序为1920x1080，1366x768，1440x900，1600x900，1024x768，1536x864。移动端使用人数从高到低排序为360x640，375x667，414x736。所以我们设计的网页还要考虑各种分辨率不同的设备最终显示效果。
综上所述，目前网页设计所要遵循的标准为响应式网页设计(Responsive Web design) 。
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。
以下是一个简单的HTML网页，其中style标签包含的是CSS样式，大家可以看下，关于CSS语法部分，我们在后面为大家介绍。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一个CSS样式网页</title>
<style>
main{
background-color: pink;
width: 100%;
height: 300px;
border: 2px solid #000;
}
</style>
</head>
<body>
<main>这里是主体显示区域</main>
</body>
</html>
以上内容部分摘自视频课程03网页前端CSS-1响应式设计。最后，希望大家远离病毒，疫情早日结束。武汉加油！中国加油！
以上是关于图文讲解-响应式设计的主要内容，如果未能解决你的问题，请参考以下文章