文章编号：1636 / 更新时间：2023-04-12 / 浏览：次

响应式网站，利于SEO(统一了URL)，利于用户体验，也利于用户分享，如下图所示：

响应式网页设计的快速教程（适合个人站）网站设计建站教程第2张

响应式网页设计的快速教程（适合个人站）网站设计建站教程第3张

(图为ipad显示效果，注意导航的变化)

响应式网页设计的快速教程（适合个人站）网站设计建站教程第4张

(图为安卓手机微信上显示效果)

响应式网页设计的快速教程（适合个人站）网站设计建站教程第5张

(PC版的直接就是现在这个界面了)

在他的协助下，我只用了一个下午时间，把卢松松博客的全站替换成了自适应主题。

核心内容在于：导航栏和CSS的两个变化。

1，网站导航两个，一个PC端，一个移动端，注意加粗部分。

响应式网页设计的快速教程（适合个人站）网站设计建站教程第6张

响应式网页设计的快速教程（适合个人站）网站设计建站教程第7张

请注意HTML源文件里的一个判断语句：

minimum-scale-允许用户缩放到的最小比例

maximum-scale-允许用户缩放到的最大比例

user-scalable-用户是否可以手动缩放

那么问题来了，如何让浏览器判断设备尺寸呢?

有两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件，弃用。原因是博客CSS文件不大代码也不多，不需要多个CSS文件，也能减少并发。

核心代码来了，开始研究响应式web设计朋友，CSS3MediaQueries是入门。

@mediascreenand(max-width:600px){/*当屏幕尺寸小于600px时，应用下面的CSS样式*/

大家可以看到我博客里有多个判断，1024px，768px，650px，500px，400px，350px。

这意味着宽度在1024px以下的屏幕，我博客会呈现六种不同的效果。但为了保证网页的连续性与完整性，同时也是图省事，下面六个CSS几乎相同。

唯一不同的是加入了display:none，不显示某些内容。所以通过CSS观察发现，屏幕越小，显示的内容就越来越少。

这也是文章开头为什么pad和移动端显示的界面不同的原因之一。

要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。

核心CSS文件，适用于任何程序https://lusongsong.com/theme/LuSongSong/style/LuSongSong-Index.css

图省事的、试用WP系统的朋友可直接下载张力博客提供的WordPress主题：http://zhangliseo.com/wp-didiao

只要制作两个导航，能看懂CSS文件就可以搞定，照猫画虎，人人都能做出响应式的网页设计，看似很难，实际上很简单。

扫描二维码推送至手机访问。

3浏览自媒体运营与推广

2浏览网站结构优化

2浏览外部链接建设

2浏览自媒体运营与推广

相关标签： 响应式网站、

本文地址：https://www.badfl.com/article/2feab1ca50733488bce7.html

上一篇：服务器1M带宽同时能承受多少人在线...
下一篇：网页是选择新窗口打开还是原窗口打开？...