Use PHP and CSS to change page text size

Source: Internet
Author: User
Tags php and

Use PHP and CSS to change the size of your Web page--Keep in mind when designing a website: Not all visitors are brilliant young people, and they are not necessarily fully familiar with the various ways in which Web browsers are used.

When designing a website, keep in mind that not all visitors are brilliant young people, and that they are not necessarily fully familiar with the various ways in which Web browsers are used. Smart designers understand this, and they often integrate a variety of special accessibility features into the design of the site, so that even the elderly or the disabled can easily and comfortably use the site without the extra effort.

The text size adjuster is one of the most effective accessibility features, any website may need it, in short, this is a tool used to change the size of Web pages, often used to make text larger and easier to read, many browsers have brought this feature, but web browser beginners do not know how to use this feature , the Web site's designers often put buttons that are easier to use on each page to implement this feature.

This guide will show you how to use PHP and CSS to add a text size adjuster with this feature on your Web page. So, quickly add this accessibility to your site so that you can get a credit score from a user older than 50 and continue reading down, and you'll learn how to use it.

Note: This guide assumes that you have installed Apache and PHP

How does it work?

Before writing the code, it is useful to take some time to understand how the text size adjuster works. Each page in the Web site contains a series of control buttons that allow the user to select the text size of the page: small, medium, and large, each of which corresponds to a CSS style sheet that holds the rules for rendering the text size of the page.

When the user makes a choice, PHP stores the user-selected font size in a session variable, and then reloads the page, which reads the selected font size from the session variable and dynamically invokes the corresponding style sheet to render the page with a smaller or larger font size.

Process

First step: Create a Web page

Starting with creating an HTML document, you first complete the contents of the placeholder, and list A is an example:

List 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 ex ea

Commodoconsequat.

Duisauteirure dolor in Reprehenderit

Voluptatevelitessecillumdoloreeufugiatnullapariatur.

Excepteursintoccaecatcupidatat non proident, sunt in culpa qui

Officiadeseruntmollitanim ID estlaborum.

Text hyperlinks at the top of the page to pay special attention, each hyperlink points to a script file named Resize.php and passes the selected font size to it through the URL get method.

Save this document in your Web server directory with the extension of. PHP, for example, index.php.

Step Two: Create a style sheet

Next, create a stylesheet file for each text size: Small.css, Medium.css, and Large.css, which is the Small.css file content:

Body {

font:10px

}

Similarly, you can create MEDIUM.CSS and large.css, use 17px and 25px, and save these style sheet files in the same directory as the pages you created in the previous step.

Step three: Create a mechanism for text size change

As described above, web pages can "know" which style sheet file to load by looking up predefined session variables, and session variables are controlled by script file resize.php (see List B), which is activated when a user clicks on a button that changes the size of the text at the top of the page. This is the content of resize.php:

List B

Start session

Import selected size into session

Session_Start ();

$_session[' textsize '] = $_get[' s '];

Header ("Location:"). $_server[' Http_referer ']);

?>

This is simple, when the user chooses a new text size, resize.php The Get method to obtain the value of the font size, stores it in the session variable $_session[' Textsize ', and redirects the browser to which page it originally opened. [Next]

Of course, there is also a missing component: smart enough to automatically detect the text size now selected by the user and load the appropriate stylesheet, open your page file index.php for this feature, and add the following statement to the beginning of the file (see List C):

List C

Start session

Import variables

Session_Start ();

Set default text size for this page

if (!isset ($_session[' Textsi

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.