如何快速建设自适应网站(做自适应网站)

如何快速建设自适应网站,做自适应网站

内容导航：

网站怎么做到自适应网页

如何快速的学会搭建网站自适应其实很简单

网站建设如何进行自适应网页设计

如何建立自己的网页或网站具体步骤是什么谢谢！

一、网站怎么做到自适应网页

关于网站如何做到自适应网页，可根据如下操作：首先，在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-
width)，原始缩 放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。
“自适应网页设计”的核心，就是CSS3引入的Media
Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
其次，除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。

二、如何快速的学会搭建网站自适应其实很简单

可以用自助建站工具，nicebox这类不需要基础，新手很快就能做自适应网站，直接拖拽就能做一个网站的模块，整个过程下来像当年布置QQ空间，适合新手做。
不明白啊 = =！

三、网站建设如何进行自适应网页设计

答：手机上网固然便捷，但是对于网站设计师而言，却又得面临新的难题：如何才能在不同大小的设备上呈现同样的网页?手机和电脑的显示是有很大差别的，以前用电脑打开网站是很正常的，但是很可能在手机上的显示就非常的不适于人阅读。很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，这样固然保证了效果，但是比较麻烦，同时要维护好几个版本，大大增加了架构设计的复杂度。“自适应网页设计”指可以自动识别屏幕宽度、并做出相应调整的网页设计。“自适应网页设计”到底是怎么做到的?首先，在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-
width)，原始缩放比例(initial-
scale=1)为1.0，即网页初始大小占屏幕面积的100%。由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。“自适应网页设计”的核心，就是CSS3引入的MediaQuery模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。本回答由提问者推荐

四、如何建立自己的网页或网站具体步骤是什么谢谢！

2. 搭建最简单的个人博客在1.
购买云服务器和域名中，我们得到了云服务器的登录密码和域名的所有权，下面，我们将介绍如何利用云服务器和域名，搭建一个最简单的个人博客网站。这篇文章之后，你就可以随时随地通过浏览器访问自己的个人网站了！以下操作以在腾讯云购买云服务器、域名为演示，并且你已经完成了域名备案。阿里云的操作方法类似，暂时不特别写文章演示了。如果你还没购买，请点击1.
购买云服务器和域名，也可以参与下面的活动：- 腾讯云代金券领取，-
阿里云最新优惠活动，老用户也可享受文章看着很长，但是很容易操作。这篇文章的本质就是我们在云服务器安装了一个博客软件，然后将域名指向了云服务器可供访问而已。2.1
配置安全组并登录云服务器每一台云服务器都有很多端口负责对外实现不同功能的通讯（比如远程连接，传输文件，网页访问等），腾讯云的安全措施比较完备，默认将许多端口关闭，我们要安装宝塔软件（一种云服务器管理面板），就需要将端口打开，这个功能由”安全组“负责。2.1.1
配置腾讯云服务器安全组，放行端口云服务器和世界的通讯分为入站和出站两种，也就是接受外面输入的信息（比如我们的浏览器请求访问），和向外界输出信息（比如向外界传输网页内容），下面我们先分别下载这两个规则，再将规则导入我们的云服务器安全组。腾讯云-
宝塔面板安装-入站规则下载 腾讯云-宝塔面板安装-
出站规则下载下载后将其保存在你喜欢的地址，这里我们保存在电脑桌面上。下面，我们点击云服务器>安全组，选择我们购买云服务器时的地域，会显示一个安全组栏目，这个栏目已经自动跟你的实例关联，我们点击栏目右边的修改规则：-
入站规则：点击导入规则，浏览器会弹框提示选择文件，我们选择刚下载的入站规则excel表即可；-
出站规则：点击导入规则，浏览器会弹框提示选择文件，我们选择刚下载的出站规则excel表即可；整个流程如下面动画所示：至此，我们已经完成安全组的设置，下面可以登录云服务器安装宝塔面板了。2.1.2
登录云服务器进入腾讯云控制台，点击左上角云产品>云服务器，自动跳转到实例界面，你会看到自己购买的云服务器在列表上（如果没有出现，在左上角实例旁边可切换服务器地域，比如我们购买的成都）。在云服务器栏目的右侧，点击登录，跳转到登录页面，这时候只需要粘贴我们在1.
购买云服务器和域名中获得的登录密码，就可以实现登录。看着屏幕上一闪一闪的光标，你是第一次见到程序员的家伙事儿，但是不要害怕，它不是洪水猛兽，不过就是一个输入页面而已，就像微信聊天页面的输入框一样，只不过你是在和云服务器聊天。2.2
安装宝塔(bt)面板并安装软件运行LNMP环境下面我们安装宝塔面板，在上面一闪一闪的光标处，完全复制粘贴下面的命令并回车： yum install -y
wget && wget -O /install/install_ && sh
这哗啦啦的字符串流动看着有点吓人，其实不过是一堆文字描述，来告诉你程序在下载什么东西，安装好了没有等等。这一串下来，是不是感觉自己像个程序员了==、等待屏幕出现下面字符时，表示宝塔面板的安装已经完成，提示显示我们安装面板花了3分钟。记录这些信息（建议复制文本放在自己的文件夹里面），后续会需要通过这个信息登录宝塔面板。
Congratulations! Installed successfully!
================================================================== Bt-Panel:
http://132.232.13.95:8888/eaef30a6 username: r0wiopgd password: fa7120fd
Warning: If you cannot access the panel, release the following port
(8888|888|80|443|20|21) in the security group
================================================================== Time
consumed: 3 Minute!如果你安装遇到问题，可以去宝塔官网查看安装说明。上一步得到了下面的信息：- 宝塔面板登录地址；- 登录用户名；-
登录密码；下面我们根据这些信息，登录宝塔面板后台，在浏览器中打开登录地址，填写用户名密码：进入面板后，网页会自动跳出来一个弹框，显示推荐安装套件，我们选择LNMP（推荐），记得将php的版本从PHP5.6改成PHP7.3，点击一键安装，这里针对LNMP的含义稍微解释一下：-
”L“： 指Linux系统，这个我们在购买云服务器的时候已经安装了CentOS这个Linux系统分支；- ”N“：
指Nginx，是一个网页服务器软件，是它将我们的网站程序变成了网页文件供我们浏览；- ”M“：
指Mysql，是一个数据库软件，我们网站要运行，网站程序一般是写死的，然后程序从数据库读取数据显示给人看，这样的话一旦数据有变动不需要重新编写软件，而只需要程序读取变化的数据就行了。比如微信聊天，微信这个程序是写死的，而你的聊天信息是放在数据库里面的，微信从数据库读取别人发给你的聊天信息，然后显示在你的手机里；-
”P“：
指PHP编程语言，因为我们后面要装的WordPress博客软件是用php写的，所以需要安装这个语言让计算机能够识别。这就像我们在大学可能学过C++，用C++写出来的代码需要C++这个语言包来支持运行一样。这里我们选择PHP7.3，因为WordPress博客软件官方推荐我们使用最新版的PHP语言。-
phpMyAdmin：这是数据库管理软件，WordPress程序将我们的数据存放在Mysql这个数据库软件中，有时候需要手动改数据库，但是Mysql对普通人比较难上手，就用phpMyAdmin来管理。简单点说，phpMyAdmin相当于云服务器上的Excel软件，能查看，修改网页数据。下面是操作动画，等画面中显示任务为空就说明环境安装完成了。动画我加速了一下方便大家看，总体时间大概花了7，8分钟。2.3
一键部署WordPress网站程序软件运行LNMP环境安装完成之后，我们终于要开始安装WordPress这个网站程序了。这个程序非常出名，有数据统计WordPress驱动着世界上30%以上的网站。它以博客程序起家，现在功能十分完善，不仅可以用来搭建个人博客，还能做图片展示，新闻网站，论坛系统，外贸企业官网等等。我们点击宝塔面板左边的软件商店>一键部署>选择WordPress，跳出下面的弹框。其中，-
域名：
填写你购买的域名，比如你购买了(一个好名字)，那就填上去。意思是当服务器接收到浏览器请求访问，服务器会把网站根目录下面的网页文件传输给服务器。这里我因为没有其他备案的域名，使用一个子域名作为演示。-
备注： 可以不填；- 根目录： 自动生成，不用更改；- 数据库：
这是面板随机生成的数据库用户名和密码，你也可以自己设置。记录这两个信息，后续需要把信息告诉WordPress程序，让它知道自己要把信息存到这个数据库里面，网站程序才能运行；下面是动画演示，WordPress部署完成之后，网页会再次弹框告诉你之前的数据库信息（数据库名和数据库用户名自动设置是相同的），如果你前面没保存这些信息，现在复制粘贴到自己的文档里面。2.4
设置域名指向云服务器现在我们已经完成云服务器端的所有设置，可以将宝塔面板关闭了。到目前为止，我们还没对域名做任何操作，当我们再浏览器输入的时候，浏览器并不知道我们到底要访问哪个云服务器，所以它会提示“无法访问此网站，找不到xxx的服务器ip地址”。这时候我们就需要对域名进行设置，让浏览器知道它应该找哪台服务器。服务器有一个唯一的ip地址，我们在域名商那里进行设置，这个过程叫做域名解析。我的域名在阿里云购买的（所以我知道域名和服务器不在同一家厂商备案的苦），下面动画演示下。登录后进入阿里云控制台，左上角选择云解析DNS（如果你是第一次进入可能得仔细找一找，在域名与网站栏目下面），进入域名列表，选择我们购买的域名，这里我选择本网站域名，为其添加子站点的解析记录。点击添加记录，选择添加A记录：-
主机记录： 这里我填写“yanshi”，意思是为添加解析记录。你们不一样，这里需要填写“@”或者什么也不填，表示是为自己购买的主域名添加解析记录；-
记录值： 填写云服务器的公网ip地址，这个可以去腾讯云的控制台复制过来；- TTL：
默认就行，不用管它；此外，你们还可以为自己的域名添加CNAME记录，假如你购买了域名，这样做可以使浏览器在访问的时候自动跳转到，保证网站域名的一致性。基本上等个五六分钟，域名解析就可以设置完成。从现在开始，当你在浏览器中输入自己的域名的时候，浏览器就知道自己要去找哪个云服务器要网站了。腾讯云域名解析腾讯云的域名解析方法类似，登录腾讯云控制台，
点击左上角云产品>域名与网站>云解析，跳转到域名列表。下面动画中因为我没有在腾讯云购买域名所以是空白的。剩下的域名解析环节参照前面阿里云的域名解析即可。2.5
恭喜你！网站已经上线好了，至此，我们已经在服务器端安装了WordPress博客程序，也为域名添加了解析记录，可以重新打开浏览器，输入你购买的域名，就能看到网站了！准备好了吗？走你—>>>>>>>>>>>》》》》》》》》》》》》在浏览器中输入你在1.
购买云服务器和域名购买的的主域名，这里我用的是子域名。YES！能访问了！不过还需要简单设置一下。我们观察到网址自动从跳转到了/wp-
admin/，这是WordPress博客程序在运作，提示你开始进行设置。下面，为了完成WordPress网站的启动设置，我们需要准备以下信息：-
前面步骤2.3 一键部署WordPress网站程序中的数据库名；- 前面步骤2.3
一键部署WordPress网站程序中的数据库用户名（在我们教程中，用户名和数据库名相同）；- 前面步骤2.3
一键部署WordPress网站程序中的数据库密码；我们点击Continue，因为绝大多数WordPress插件都是英文，翻译成中文不太容易理解，如果你后续觉得不方便，以后可以在后台设置中换成中文。当然如果你是准备做外贸网站，推荐一直使用英文，以免网站出现中文影响国外访客浏览时的用户体验。看WordPress安装配置的过程，我们分别来讲一讲主要的两个页面：数据库信息设置页和站点信息设置页面：数据库信息设置页：这个页面主要是告诉WordPress程序自己应该把网站数据存放在哪个数据库下面。并告诉它这个数据库的登录用户名和密码是什么，这样，WordPress就有权限存放网站数据了。站点信息设置页：主要是填写你希望网站叫什么名字，你登录网站管理后台的用户名、密码等。这里使用程序随机生成的密码，注意复制下来保存。这里再提示一下最下面那个“Search
Engine
Visibility”一栏，勾选它，表示希望搜索引擎（比如百度、谷歌等）不要收录本站点，这是因为现在我们的网站还是一片白纸，我们不希望搜索引擎认为自己的站点不重要。网站已经上线是的，恭喜你！你的网站已经可以访问了，通过浏览器访问你的主域名，会显示下面的网页。你现在可以试试用手机浏览器打开自己的主域名，也能显示你的网站。我们已经完成了最简单的博客网站的搭建！能跟着教程做到这一步，为你自己鼓掌！下面图片的左边是电脑端的浏览器展示效果，右边是手机端的展示效果，我们的网站是自适应的，也就是随着浏览器的尺寸变化，会自动调整网站布局。2.6
收尾工作我们已经成功建成了一个最简单的博客网站，理论上，我们可以开始写文章，传日常生活照片了，但是为了以后的使用方便，以及网站在搜索引擎上的表现，现在来进行一些收尾的工作吧。2.6.1
WordPress语言换成中文这在前面说过，如果你不习惯英文，可以换成中文。再提示一下，外贸网站还是全程使用英文比较好。我们打开网站后台（在浏览器中打开/wp-
admin这个页面，记得把域名换成你购买的主域名），登录进去，在左边栏目中选择Settings>General，跳转到设置页，在其中的Site
Language中，选择最下面的中文，滑到页面底部，选择Save Changes即可。整个切换WordPress站点语言的过程如下面动画所示。2.6.2
给网站传输加密-
开通SSL你可能已经注意到了，浏览器最上方的网址URL前面有显示“不安全”，这是因为我们在浏览器访问网站时，浏览器和服务器之间没有加密，所以访客在网站输入的信息可能会在传输过程中被窃取。这对我们普通的展示型网页影响不大，但是对于需要输入银行卡密码，交易信息的网站就很有必要。现在因为搜索引擎都比较偏爱传输有加密的网站，所以我们就给网站传输加密吧，不花一分钱！现在我们的网站url是（）,下面我们通过给网站访问嵌套一层SSL，让网站url变成。首先，使用我们在2.2
安装宝塔(bt)面板并安装软件运行环境中保存的登录信息，登录宝塔面板，在面板左侧点击网站，选择列表中我们刚建立的网站，浏览器自动跳出一个弹框，我们选择左边的SSL，选择Let’s
Encrypt，并选择文件验证，勾选我们的域名，点击申请，此时浏览器弹出一个黑色的命令提示框，提示我们SSL部署的进度。等待30秒左右，提示SSL已部署成功，我们再点击右上角的强制HTTPS，强制所有指向云服务器的网页流量都经过访问。这里简单说明一下Let’s
Encrypt，它给全球网站提供免费加密服务，缺点是每3个月要为网站申请一次加密证书。幸好，宝塔已经帮我们提供了自动续签服务，这样设置完成之后，我们就可以不管它了。现在我们访问我们的网站，在url前面就会显示小绿锁了，显示站点连接是安全的。下面，我们还需要在站点后台对站点url进行设置。网站部署SSL之后更改站点地址（URL）因为我们网站安装之时未开启SSL，WordPress自动将我们的站点地址设置成了，这导致我们后续上传图片等媒体文件时，自动将图片url设置成http而非https，导致有图片的页面浏览器显示不安全。为了解决这个问题，我们到网站后台，点击设置>常规，将里面的WordPress地址（URL）和站点地址（URL）均改成https开头。2.6.3
更改网页固定链接样式-
LNMP环境下wordpress程序站点伪静态WordPress后台的设置页面有一个固定链接，这里我们可以指定我们撰写文章后文章网址url的样式，一般为了站点美观以及搜索引擎优化，我们选择下面文章名这种样式，点击保存更改。对于运行Nginx的网页服务器，我们直接更改固定链接会出现WordPress网站只能访问首页的问题（所有其他页面都显示404
Not Found），有很多人就掉进了这个坑。为了解决404Not
Found的问题，我们需要设置站点伪静态来解决这个问题。“站点伪静态”这个名字不太容易理解。意思是我们的WordPress程序是一个动态程序，它每接收一次浏览器访问请求，都会去数据库中查询数据，所以是个动态的过程。静态程序不一样，都是写死的网页，比如一个纯粹的网页文本。“伪静态”的意思，就是开通这个服务之后，可以让动态网页程序表现地像静态网页一样（对我们来说主要就是网页url能够自由设置），便于搜索引擎抓取。登录宝塔面板后，在左边栏选择网站，选择我们的网站，在浏览器弹框中选择伪静态，左上角选择wordpress，点击保存即可。我们重新刷新下之前无法访问的网站，发现已经可以访问了。2.6.4
WordPress网站后台的基本设置我们还需要对网站后台进行一些基本设置，保证后续的使用体验。删除无用的插件使用2.3
一键部署WordPress中保存的登录信息，登录网站后台（如/wp-
admin），点击左边的插件>已安装插件，删除其中的你好多莉，这是个开发人员的情怀插件，没什么用。启用Akismet拦截垃圾评论当我们的网站上线后，会有很多机器爬虫自动在我们网站上留言垃圾留言，如果不设置Akisment，我们每天删除这些留言都得费些功夫。在插件>已安装的插件页面，点击Akismet
Anti-Spam下面的启用，网站会自动跳转到Akismet的激活页面，点击Set up your Akismet
account按照网页提示激活服务即可。选择PERSONAL版本的就够用了，他自动跳出来让你按意愿支持点钱，可以选择0元。填写网站标题和副标题在2.5
恭喜你，网站已经上线那一节，我们已经设置了网站标题，我们在这里可以进行更改，在网站后台，点击设置>常规，填写站点标题和副标题，滑到最下方点击保存更改即可。安装WP
Acceleration for China插件-
解决WordPress网站国内访问慢的问题因为WordPress内置了一些谷歌的服务以及Gravatar的头像服务，而中国大陆是将这些服务屏蔽的，所以我们打开网站的速度会比较慢。下面我们通过下载一个插件“WP
Acceleration for
China”来解决这个问题。这个插件的功能就是将这些被屏蔽的服务替换成了国内能访问的服务镜像。在网站后台，我们进入插件>安装插件，搜索WP
Acceleration for
China，等出现结果后，点击现在安装，待安装完成，点击启用即可。最近WordPress网站抽风，经常拒绝国内的访问，可能会提示安装失败：下载失败。Too
Many Requests：这个时候不要慌，我们可以多试几次，我多试了两次，安装成功。如果还是不行，请登录插件下载页面（/plugins/wp-
acceleration-for-
china/），将插件先下载到本地电脑桌面，然后通过上传插件功能完成安装，安装之后点击启用，启用之后无需其他操作。如果你的电脑不能访问上面的网址，多试几次。如果还是不行，那就挂上番强（谐音）软件再试试，FQ软件下面我有一个推荐的，可以点击购买使用，买15块钱一个月的就行。希望大家在外网不要被所谓的民主自由带偏了，国外的媒体也都不是什么天使大姐，都是吃资本饭的。你也知道，资本是会吃人的。番强服务推荐这时候我们再用浏览器访问自己的网站（按Ctrl+F5强制刷新），会发现速度快了很多。2.7
总结这篇文章，我们通过自己购买的云服务器和备案后的域名，成功搭建了一个最简单的个人博客网站。我们首先登录云服务器，安装了服务器管理面板（宝塔bt面板）。然后通过宝塔面板安装了博客程序所需要的运行环境（LNMP环境），并且使用宝塔面板一键部署了WordPress博客程序。接着，我们通过域名解析，将自己购买的域名指向云服务器，实现了域名的访问功能。最后，我们设置安装了WordPress程序，完成了个人博客网站的搭建。直观地看，在搭建个人网站的流程中，我们做了以下的事情：
步骤 需要这些信息 得到这些信息 2.1 配置安全组并登录云服务器 云服务器登录密码 – 2.2
安装宝塔(bt)面板并安装软件运行LNMP环境云服务器登录密码 宝塔面板登录用户名密码 2.3 一键部署WordPress网站程序
宝塔面板登录用户名密码数据库用户名密码 2.4 设置域名指向云服务器 域名管理权 – 2.5 恭喜你！网站已经上线 数据库用户名密码 后台登录用户名密码
2.6 收尾工作 后台登录用户名密码 – *云服务器和域名是我们在第一篇1.
购买云服务器和域名中获得的信息。在这系列建站教程中，我们总共有4篇文章介绍普通人如何从0到1搭建个人网站：1. 购买云服务器和域名2.
搭建最简单的博客网站3. 发布第一篇博客文章4.
个性化自己的网站现在访问我们的域名，展现的是WordPress预设的博客网站，里面只有一篇自动生成的文章。下一篇，我们会给网站添加自己的文章，一起进入3.
发布第一篇文章吧！【若图片及演示gif动画无法打开，请点击本文原始地址-几千寒热】/wangzhan-weihu/