受欢迎的博客标签

Mobile website series:How to Make Your HTML Website Suitable for Mobile Devices

Published

Responsive (Web)Design is one possible solution.

 

Only basic HTML/CSS knowledge is required
No additional App Programming/Installation

 

A HTML-file contains information of a website, the CSS file defines the layout structure.  
That means you only have to add a new tag in an existing HTML file and extend the CSS Stylesheet.

 

Step 1:Add One Code Line in the HTML-File

At first you add a meta tag into your HTML-File between the <head></head> tags:

<meta name="viewport" content="width=device-width, initial-scale=1" /> 

这是个什么意思呢,通俗讲就是等比例缩小了,按照你设备的宽度。

This codeline defines the default zoom for mobile devices.

width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width
为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。 height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。 minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放。

Step 2: Media Query for Mobile Devices

修改CSS样式

直接添加css样式,你在手机上显示可以了,但是在PC端的样式是不是也给修改了,咱们自适应的前提之一就是不改变PC端网页的样式。这时候,需要咱们第二段神奇的代码:

@media screen and (max-width: 720px) {

}

这个就是css中的媒体查询,max-width 意思为 当前页面的最大宽度 满足这个条件,就会执行这里面的代码。

 

Step 3:css优先级的问题

1.给body写的css并没有起作用。原因是优先级的问题。

2.写在body 上方style标签内的优先级要低于 标签内的。也就是它的优先级比我高,我写的就不显示了。

如下:

<style type="text/css">
优先级小
<style>

<p style=" 优先级大"></p>

3.只需要通过添加!important 就可以使其优先级最高。

body{width: 90%!important; padding: 0px!important; margin:0px!important; min-width:350px!important;}

see:

https://www.instructables.com/Make-your-HTML-Website-suitable-for-Mobile-Devices/

一步步从PC(电脑)网页自适应到手机端网页