Change page text size with PHP and CSS _php tutorial

Source: Internet
Author: User
Use PHP and CSS to change the size of your Web pages--When designing a website, keep in mind that 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 they are not necessarily completely familiar with the various ways in which Web browsers are used. Smart designers understand this, and they often incorporate a variety of special accessibility features into the design of the site, so that even older people or people with disabilities can easily and comfortably use the site without having to spend extra effort.

The text size adjuster is one of the most effective accessible features that any website may need, in short, this is a tool to change the size of the page text, which is often used to make the text larger and easier to read, and many browsers already have this feature, but web browser beginners don't know how to use it , the Web site's designers often put the easier-to-use buttons 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 functionality to your Web page, so quickly add this accessibility to your site so that you can get credit for the credits from users older than 50 and continue reading down, and you'll learn how to use it.

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

How does it work?

It is helpful to take some time to understand how the text size adjuster works before writing the code. Each page in the 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 page text size.

When the user makes a selection, 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 re-render the page with a smaller font size or a larger font size.

Process

First step: Create a Web page

Starting with creating an HTML document, the contents of the placeholder are completed first, and listing 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 utaliquip ex ea

Commodoconsequat.

Duisauteirure dolor in Reprehenderit in

Voluptatevelitessecillumdoloreeufugiatnullapariatur.

Excepteursintoccaecatcupidatat non proident, sunt in culpa qui

Officiadeseruntmollitanim ID estlaborum.

Note the text hyperlink at the top of the page in particular, 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 as a. php extension in your Web server directory, for example, index.php.

Step Two: Create a style sheet

Next, create a style sheet file for each text size: Small.css, Medium.css, and Large.css, which is the file contents of Small.css:

Body {

font:10px

}

Similarly, you can create MEDIUM.CSS and large.css, using 17PX and 25px respectively, to store the stylesheet files in the same directory as the pages you created in the previous step.

Step three: Create a change mechanism for text size

As described above, web pages can "know" which stylesheet file to load by looking up predefined session variables, which are controlled by script file resize.php (see List B), which is activated when the user clicks the button that changes the text size 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 Gets the value of the font size by the Get method, stores it in the session variable $_session[' Textsize '), and then redirects the browser to which page was originally opened. [Next]

Of course, there is a missing component here: intelligently let the page automatically detect now the user selected text size and load the corresponding style sheet, in order to join this function, open your Web page file index.php, 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

http://www.bkjia.com/PHPjc/767404.html www.bkjia.com true http://www.bkjia.com/PHPjc/767404.html techarticle use PHP and CSS to change the size of Web pages when designing a website, keep in mind that not all visitors are brilliant young people, and they are not necessarily completely familiar with Web browsing ...

  • 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.