利用PHP和CSS改变网页文字大小

   用PHP和CSS改变网页文字大小——在设计网站的时候,要牢记一点:并不是所有的访问者都是神采奕奕的年轻人,而且他们也不一定完全熟悉Web浏览器的各种使用方法。

  在设计网站的时候,要牢记一点:并不是所有的访问者都是神采奕奕的年轻人,而且他们也不一定完全熟悉Web浏览器的各种使用方法。聪明的设计者了解这一点,他们常常将各种特殊的可访问特性融入网站的设计中,这样,即使是年长者或是残疾人士都可以方便舒适地使用网站,而不必花费额外的力气。

  文本大小调节器是最有效的可访问特性中的一个,任何网站都可能需要它,简而言之,这是一个用于改变网页文字大小的工具,通常用于将文本变大从而易于阅读,很多浏览器已经自带了这一特色,但是网络浏览器的初学者并不知道如何使用这一功能,因此,网站的设计者经常将更易于使用的按钮放在每个网页上来实现这一功能。

  这篇指南将向您介绍如何使用PHP和CSS在网页上添加具备这种功能的文本大小调节器,因此,赶快向您的网站添加这一可访问性,这样从年纪大于50岁的用户那里获得赞誉的积分,继续向下读,您将学会使用它的方法。

  注意:这篇指南假定您已经安装了Apache和PHP

  它是如何工作的?

  在写代码之前,花一些时间来理解文本大小调节器的工作方式是非常有益的。网站中的每个网页都包含一系列控制按钮,他们允许用户选择页面的文字大小:小号、中号和大号,每种字号都对应于一种CSS样式表,这些样式表保存了用于渲染网页文本大小的规则。

  当用户做出选择的时候,PHP将用户选定的字号存储在一个会话变量中,然后重新加载网页,该页面将从会话变量中读取选定的字号,并动态调用相应的样式表以更小的字号或更大的字号来重新渲染网页。

  过程

  第一步:创建网页

  从创建HTML文档开始,首先完成占位符的内容,列表A是一个例子:

  列表A:

  Text size: small | href="resize.php?s=medium">medium | large

  Loremipsum dolor sit amet,

  consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore

  magna aliqua. Utenim

  ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea

  commodoconsequat.

  Duisauteirure dolor in reprehenderit in

  voluptatevelitessecillumdoloreeufugiatnullapariatur.

  Excepteursintoccaecatcupidatat non proident, sunt in culpa qui

  officiadeseruntmollitanim id estlaborum.

  对页面顶部的文字超链接要特别注意,每个超链接都指向了名为resize.php的脚本文件,并通过URL GET方法将选定的字体大小传递给它。

  在您的Web服务器目录中以.php的扩展名来保存这个文档,例如,index.php。

  第二步:创建样式表

  接下来,为每种文字大小创建样式表文件:small.css, medium.css和large.css,这是small.css的文件内容:

  body {

  font: 10px

  }

  同样,可以创建medium.css和large.css,分别使用17px和25px,将这些样式表文件和上一步创建的网页保存在同一个目录中。

  第三步:创建文本大小的改变机制

  正如上文介绍的,网页通过查找预先定义的会话变量可以"知道"加载哪个样式表文件,会话变量是通过脚本文件resize.php来控制的(参见列表B),该文件是在用户点击了网页顶部改变文字大小的按钮时激活的,这是resize.php的内容:

  列表B

  // start session

  // import selected size into session

  session_start();

  $_SESSION['textsize'] = $_GET['s'];

  header("Location: " . $_SERVER['HTTP_REFERER']);

  ?>

  这很简单,当用户选择了一种新的文本大小,resize.php通过GET方法来获得字号的值,并将其存储在会话变量$_SESSION['textsize']中,然后将浏览器重新定向到原来打开的哪个页面。 [next]

  当然,这里还缺少一个组件:智能化得让网页自动检测现在用户现在选定的文本大小并加载相应的样式表,为加入这一功能,打开您的网页文件index.php,并将以下语句加入到文件的开头(参见列表C):

  列表C

  // start session

  // import variables

  session_start();

  // set default text size for this page

  if (!isset($_SESSION['textsi

时间: 2024-11-02 19:12:37

利用PHP和CSS改变网页文字大小的相关文章

JS根据浏览器窗口大小实时动态改变网页文字大小的方法_javascript技巧

本文实例讲述了JS根据浏览器窗口大小实时动态改变网页文字大小的方法.分享给大家供大家参考,具体如下: 目前,有了css3的rem,给我们的移动端开发带来了前所未有的改变,使得我们的开发更容易,更易兼容很多设备,但这个不在本文讨论的重点中,本文重点说说如何使用js来实时改变网页文字的大小. 代码如下: <script> /* 长宽占位 rem算法, 根据root的rem来计算各元素相对rem, 默认html 320/20 = 16px */ function placeholderPic(){

JavaScript动态改变网页图片大小

在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了.如果对每个插图都先进行缩放再插入的话,太麻烦了. 我前段时间写的一篇文章就遇到过这种事情,后来用CSS的overflow和max-width属性暂时解决了页面变形的问题.这种方法好处是简单,但坏处是会破坏某些细节的效果. 如overflow:hidden,意思是当内部元素宽度大于父框架时隐藏超出宽度的部分.这样做可能会是一些内容突然截断,被隐藏了,很对不起观众. 通过max-width属性限制文章插图最大宽度的话,需

如何改变网页字体大小?

  网页的字体太大或太小会造成浏览者的视觉效果差.我们可以通过下面提供的三个方法来恢复到正常的大小. 方法一: 很多朋友出现网页字体变大或变小都是错误的调整到了网页的缩放比例导致的,正常网页缩放比例是100%,在浏览网页的最右下角可以看到缩放的比例,如果是比例设置不正常,那么网页字体肯定显示不是正常大小了,如下图: 如上图所看到的就是正常情况下网页所显示的100%缩放网页字体显示大小,如果调节成75%字体就会变的小了不少. 所以当您发现电脑浏览网页出现字体变大或者变小,首先查看下网页缩放比例是否

如何改变网页字体大小

  1.其实很多朋友出现网页字体变大或变小都是错误的调整到了网页的缩放比例导致的,正常网页缩放比例是100%,在浏览网页的最右下角可以看到缩放的比例,如果是比例设置不正常,那么网页字体肯定显示不是正常大小了,如下图: 2.我们也可以以IE8为例,点击页面菜单查看→选择缩放→根据适合的大小进行调整.如下图: 如上图所看到的就是正常情况下网页所显示的100%缩放网页字体显示大小,如果调节成70%字体就会变的小了不少,如下图: 3.所以当您发现电脑浏览网页出现字体变大或者变小,首先查看下网页缩放比例是

CSS使网页文字竖排

竖排在文字处理办公软件中非常容易就可以实现.由于这种效果在网页制作中并不多见,所以这个问题的讨论比较少.但是在制作具有中国古代特色的网站,如文字历史.书法.名胜古迹旅游等等网站时,如果用上竖排的文字,配以古色古香的背景及朴实陈旧的色彩,在视觉上会获得意想不到的效果. 样式表的文字处理属性中有两个重要的属性:writing-mode和text-align. 1. writing-mode(设置对象书写方向) 语法:writing-mode : lr-tb.tb-rl 参数:lr-tb:从左向右,从

如何设置改变网页字体大小

  方法如下: 1.更换播放器试试,比如换成QQ影音播放器. 2.将内存拔下一条,只上一条内存,两根内存分别测试.整合图形显卡显存会调用内存来用,如果内存有问题,则可能导致花屏. 3.是否整合显示芯片的北桥芯片过热,自己用手触摸,如果太热建议加一个北桥芯片散热器增强散热效果.

JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)_jquery

放大 缩小 This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some tex

响应式网页设计:rem设置网页字体大小自适应

文章简介:响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web 的初衷. 首先简单科普一下什么是响应式网页.响应式网页是指会根据输出设备的分辨率不同,而自动调整布局的网页.同时,在输出设备分辨率改变时,也能及时自动调整.说穿了,就是三个字:自适应. 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web

网页设计CSS中文字大小的pt、px的区别

先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:而pt就是point,是印刷行业常用单位,等于1/72英寸. 在网页设计css中,经常用到字体,而字体大小的设置单位,常用的有2种:px.pt.这两个有什么区别呢? 先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:而pt就是point,是印刷行业常用单位,等于1/72英寸. 这样很明白,px是一个点,它不是自然界的长度单位,谁能说出一个"点"有多长多大么?可以画的很小,也可以很大.如