zblog移动端自适应（css 移动端 自适应）

本篇文章给大家谈谈zblog移动端自适应，以及css 移动端 自适应对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、请教一个iPhone手机自适应网页宽度的问题
• 2、如何建立个人网站 zblog建站教程
• 3、Z-Blog博客系统 怎么用 详细
• 4、怎样制作wordpress手机主题
• 5、网站手机端最小字体是.16rem吗

请教一个iPhone手机自适应网页宽度的问题

1、在HTML头部增加viewport标签。 在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下： meta name="viewport" content="width=device-width, initial-scale=1" / 这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。 2、在CSS文件尾部增加针对不同屏幕分辨率的规则。 例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。 @media screen and (max-device-width: 480px) {#divMain{float: none;width:auto;}#divSidebar {display:none;} } 3、布局宽度使用相对宽度。 网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。 4、页面使用相对字体（非必要） 在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。 5、图片自适应（非必要） img标签的话，只需要设置 max-width: 100%;或width:100%; 语句为：img { max-width: 98%; } css加载的background-image如何自适应大小呢，其实CSS3中是可以实现的，添加如下语句：background-size:100% 100%; 根据上面讲述的几点内容，我针对我博客的CSS进行了一些修改，发现可以从iPhone手机浏览到体验更佳的页面，但有一个问题没有解决，就是顶部导航栏navbar显示有问题，换行后被下面的文章盖住了，不知道怎样能更好地解决这个问题（更新：经过网友提示，在导航栏divNavbar的样式里，加入 white-space:nowrap; overflow:hidden; 即可解决这个问题）。

如何建立个人网站 zblog建站教程

1、我们来看一下安装z-blog php最新版需要什么样的环境，这个在安装前是一定要注意的，买主机前问清楚。

Z-BlogPHP需要PHP 5.2及以上版本的PHP环境；

支持IIS、Apache、Lighttpd、Nginx、Kangle等Web服务器（本说明经针对普通服务器）。

2、去z-blog官网下载一个install.php的文件，我使用的是在线安装的方式。

接下来就是将install.php上传到网站根目录内，并在浏览器下打开install.php页面点安装后，将自动从Z-Blog官方网站下载最新版本的ZBlogPHP程序，在这里跟目录文件夹是htdocs;我用的是FTP客户端上传，见下图：

3、出现一个在线安装的界面，点击在线安装，见下图：

4、进入在线安装程序，继续点击同意协议，并按照提示下一步:

5、欢迎检查界面，继续下一步：

6、数据库建立与设置，在我这里需要注意的是数据库的信息这里怎么选，由于买空间的时候我们看到数据库类型是SQLite v2.8.14，所以我在这里就直接选择SQLite数据库了；刚开始第一次安装的时候，没注意，选择了MySQL数据库，结果发现安装后进入后台，想操作的时候出现一串错误的代码。这就是属于数据库类型没选好的原因。SQLite数据库是程序自动生成的，所以在这里我们不用填写具体的什么信息了。网站设置那里就你自己想填什么，就填写什么了，根据自身的要求来，填完后保存好用户名和密码，待会方便登陆后台管理；

7、数据库设置好后完成就直接进入到后台了，并生成后台界面和地址。

注意事项

这种是在线安装方式，必须下载一个install.php文件；

根据自己空间的配置，选择合适的数据库建立方式。

Z-Blog博客系统 怎么用 详细

Z-Blog 1.7 使用手册

系统配置:

服务器：Windows 2000及IIS5.0以上，需要ADO数据库、FSO、XMLDOM等系统组件支持和空间的读写权限，具体请查询网络服务商或查看本机配置。

客户端：支持Mozilla FireFox 1.0、IE6.0、Opear 8.0及更高版本的浏览器。客户端浏览器需要启用JavaScript脚本支持。

安装说明:

如果用的是手动安装包,上传所有文件后,在浏览器中打开博客地址将自动转到初次安装的向导页.

如果用的是自动安装包,上传仅有的两个文件后,在浏览器中打开 ,其中指的是你的博客地址,像这样: ,程序会引导你完成几个简单的安装步骤.

进入向导页也仅需完成4项内容:

1.BLOG的网络地址(自动读取)

2.数据库的名称和地址(系统自动随机生成)

3.博客管理员账号(用户名与密码)

4.BLOG唯一标识符(系统自动随机生成)

实际上,在这一步中,只要设置好你的管理员账号就行了,其它三项都由程序自动生成的.

点击提交,整个安装过程就完成了,Good Luck To You!

如果你的域名更换或想把数据库移至其它目录,请参考使用说明中的"如何手动配置BLOG程序?"条目,以更新配置.

另外,在程序后台"用户管理"中,管理员可以创建比自己权限低的账号，推荐建立一个“高级用户”供日常使用。

升级说明:

使用1.2-1.6beta版本的用户，将数据库放入1.7版程序的DATA目录中，在设置完c_custom.asp里的ZC_DATABASE_PATH参数和ZC_BLOG_HOST参数后，使用以前的账号登入后台管理界面，在[备份与更新]栏使用[数据库升级]功能，让旧版的数据库升级为最新版的数据库结构，再将需要保留的附件、样式等放入相应的目录即完成了升级。1.6 Final版本的用户不用升级数据库，只修改ZC_DATABASE_PATH参数和ZC_BLOG_HOST参数。

使用说明:

1.如何手动配置BLOG程序?

当域名变更或其它原因需要手动配置BLOG程序，参照此法：

请先将c_custom.asp文件中的 ZC_BLOG_HOST 更改为已分配的IP或域名。

格式一定要是""，前面要加 http://' ,后面要加上 '/' 。

将DATA目录下的数据库改为一个非常复杂的名称。

再更改 ZC_DATABASE_PATH 值为 "data/你的数据库名称" ，数据库升级只能放在DATA目录下(你可以在升级后更改路径)。

数据库中默认的管理员账号和密码均为zblogger。

2.在[网站设置]中更改你的BLOG名称等等，也包括更换CSS界面样式等各种配置。

在设置完成之后请点[文件重建]或[索引重建]以让更改后的配置生效。

3.首次使用,请先在[分类管理]建立一个分类，再到[文章管理]中添加新日志文章。

管理员和高级用户有分类创建或删除的权限。

4.可选用UBB编辑器或是可视编辑器新建和修改日志。

在文章提交完成之后再次编辑该文件才能向对方的BLOG发送引用。

最好请自行提取正文的文字做为摘要，系统的自动截断功能有可能会使列表页显示不正常。

5.什么时候需要点击[索引重建]？

[索引重建]让系统刷新缓存和统计数据，同时，生成该BLOG的RSS 2.0和Atom 1.0聚合的XML文件于根目录中。

每次发表文章、修改分类等操作后需要点击[索引重建]。

6.什么时候需要点击[文件重建]？

当你在[网站设置]更改了相应的设置，都需要使用“文件重建”以使每个文章页面更改生效。

“文件重建”是一个消耗资源与时间的事件，尤其是BLOG中日志数量众多时。

7.如何减轻服务器压力进行[文件重建]？

在“网站设置”中将"单次重建文件数目"设置为10-20个左右，

将"单次重建文件后的间隔秒数"设置为5-10秒左右，

再进行[文件重建]，就会将一个很长的过程分解为有时间间隔的小段重建过程。

8.关于“导航栏”、“友情链接”等条目请在在后台进入[文件管理]页面直接修改源文件。

它们的格式都是：

lia href="" target="_blank"布罗格的烘培机/a/li

也可在INCLUDE目录中修改相应文件的HTML代码。

9.如何让日志显示源代码，包括HTML，ASP，PHP代码等，请用“[ CODE ] [/ CODE ]”(固定文本区域)

或“[CODE_LITE] [/CODE_LITE]”将源程序包含就行了。

UBB代码请参考这里的介绍:;extra=page%3D1

10.附件都上传在UPLOAD目录中，只能上传限定类型的文件。

请用IE或FireFox上传全ASCII字符名称的文件。

在[网站设置]中可以设置上传文件的种类和大小限制。

11.如何在日志中引用附件呢？

编辑状态下上传附件将自动插入相应代码。以下格式，系统会自动将相对路径替代成绝对路径。

a href="upload/abc.zip" alt="xxx" title="xxx"xxx/a

img src="upload/abc.jpg" alt="xx" title="xxx" width="xx" height="xx" /

[ URL=]abc.jpg[/URL] 或 [URL=upload/abc.jpg]abc.jpg[/URL]

12.如何在一个站点(域名)内使用两个及以上的Z-Blog程序？

进入后台[网站设置]页，将ZC_BLOG_CLSID设置为不同的值即可。

由于程序自身的限制，Z-Blog不支持多域名共同指向同一个BLOG。

13.Z-Blog的XML-RPC功能如何使用？

Z-Blog的XML-RPC接口采用MetaWeblog的API，可以在相应软件和网站调用该接口。

相应的XMP-RPC接口URL为: ,在你的博客后台首页可以看到该地址.

14.如何应对SPAM的侵扰？

每隔一段时间（几个月或更长）在后台设置中更改一次ZC_BLOG_CLSID的值，然后进行[文件重建]。在网站设置里还可以关闭评论和引用。或是采用第三方的插件以达到此目的。

15.请保管好你的管理员账号与密码。

Z-Blog提供对管理员账号开放权限的服务器文件修改功能，这个功能非常强大但也异常危险，所以请你务必小心保管你的管理员的账号，防止他人对你网站的全面侵入。

怎样制作wordpress手机主题

首先wordpress本身就自带手机主题

Wordpress这个程序非常好，不仅有自动手机等移动端的自适应功能，还有很多模版供我们使用，其实你可以百度搜索wordpress主题就有很多了，而且都是手机的自适应的主题。

其实建议用收费的模版主题

如果你打算长期建站使用，也打算长期运营您的网站我建议您购买收费的主题，我自己的主题就是知更鸟（begin）手机什么的都是自适应的，截图给你看看。

最后：如果你自己没什么程序基础也就是对HTML5、PHP、css这些程序语音不懂的话我建议您不要浪费时间了，除非您现在是在校的学生而且刚好学习这个专业，想多学习学习，那到是可以，学习方法也很简单，百度 搜索 wordpress 主题教程多的去。

总结：手机主题这些，如果你不是专业的建议不要去浪费时间，直接付费的也不错，我自己也一直在使用付费的，而且价格也很合理，那就是知更鸟（begin）你可以去看看，这个是我的真心建议。

网站手机端最小字体是.16rem吗

px、em、rem

px 是固定的长度单位

em 是父元素的font-size(字体大小)的值，常用来设置首行缩进2em(2字符)

rem 是根节点(html，body)的font-size(字体大小)的值，可以用来做移动端的自适应。

为什么要适配移动端

px像素(pixel)

相对长度单位。相对于显示器屏幕分辨率而言。PC端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem

em

相对于父节点的font-size，会有一些组合的问题。比如你把body的font-size定义为50%，一般地会是8px。

那么你在body里字体大小就是 1em=8px

可当你定义了一个div，然后把字体设置成了75%，请问，现在的1em等于多少？

这个时候你会发现，原来他继承了body的值，现在字体更小了，变成了6px！

因为em是相对于父节点的单位，这么嵌套下去，你要数嵌套层级和比例，你会哭的饿...... (幸好出现了rem)

rem

相对长度单位，指相对于根元素的字体大小的单位。

rem只会相对html的值，不会受到父级的影响，这样的好处在于：从em里的例子来讲，1rem始终会等于8px。

使用的时候不需要重新计算rem此时的大小。

rem因为是css3增加的，所以ie8或以下请无视。

屏幕适配的几种方法(流式布局、固定宽度、响应式、通过viewport进行缩放、使用rem)

1、流式布局

在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点

往往只有几个尺寸的手机下看到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。

流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。

2、固定宽度

把页面设置成320的宽度，超出部分留白，这样做视觉，前端设计都挺挺开心，UI再也不用被流式布局限制自己的设计灵感了，前端也不用流式布局。

但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，浪费了宝贵的可用空间(放几个广告也好啊，我错了...)

还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小

3、响应式

响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性

难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，因为这样

反而可以节约成本，不用再专门为自己的网站做一个web、app的版本。

4、通过viewport进行缩放

以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。

说实话，我觉得他和用接下去我们要讲的rem都非常高效，不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。

5、使用 rem 相对字体

rem 等比例适配所有屏幕，通过js来判断当前屏幕大小，进而设置html的font-size

代码里面rem的值就是Ui设计稿上量的px除以100就是你代码中要写的rem值。

(function(){

var currClientWidth,

fontValue,

originWidth;

originWidth = 750;//ui设计稿的宽度，一般750或640

__resize();

window.addEventListener('resize', __resize, false);

function __resize() {

currClientWidth = document.documentElement.clientWidth;

if (currClientWidth 768){

currClientWidth = 768;

}

if (currClientWidth 320){

currClientWidth = 320;

}

fontValue = ((625 * currClientWidth) / originWidth).toFixed(2);

document.documentElement.style.fontSize = fontValue + '%';

}

})();

// 当前假如当前分辨率是375， 设计稿分辨率是750

// 750/375=0.5

// 比例关系是0.5倍

// 再算一下你要换算1rem等于多少px，

// 假如我要100， 100/16=6.25

// 把这个换算的乘以刚才得出的比例

// 0.5*625=312.5

// 最后还拼接了一个百分号 = 312.5%

// 就是在375分辨率下 1rem = 312.5%

// 312.5% * 16px = 50px

前端设置使用 rem 最经典代码

下面代码在是中国平安工作时，身边的一个同事写的，兼容性特别好,移动端建议使用。

(function(doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function() {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window)

代码说明：

docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';

例如：手机竖屏的宽度为 750px，则 fontSize = 50 * (750 / 375) = 100px

像素就可以直接使用rem，比如 font-size: 0.2rem; 即 font-size: 20px;

rem 做移动端适配

一般长度最好是除得尽的数值，例如40，50。

mimvp blog

var html = document.documentElement;

var htmlWidth = document.documentElement.clientWidth;

//html.style.fontSize = htmlWidth/27+'px'; //如：设计图1080宽度，将屏幕分为27份，每份为设计图的40px

html.style.fontSize = htmlWidth/15+'px'; //如：设计图750宽度，将屏幕分为15份，每份为设计图的50px

*{

margin: 0;

padding: 0;

list-style: none;

}

.box{

width: 7.5rem; /* 相当于设计图上的7.5*50px 设置的值=设计图上的长度/每份的长度 */

height: 2.5rem; /* 相当于设计图上的2.5*50px */

border: 1px solid #000;

}

代码说明：

//html.style.fontSize = htmlWidth/27+'px'; // 如：设计图1080宽度，将屏幕分为27份，每份为设计图的40px

html.style.fontSize = htmlWidth/15+'px'; // 如：设计图750宽度，将屏幕分为15份，每份为设计图的50px

width: 7.5rem; /* 相当于设计图上的7.5*50px 设置的值=设计图上的长度/每份的长度 */

height: 2.5rem; /* 相当于设计图上的2.5*50px */

zblog移动端自适应的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css 移动端 自适应、zblog移动端自适应的信息别忘了在本站进行查找喔。