博客

HTML

HTML (2)

自适应网页就是针对不同的设备定义不同的CSS样式,让同一个URL网址在不同的设备上都能较好的展示,传统的方式针对电脑用户制作PC版网站,针对手机用户制作移动网站的做法有很大的局限性,而且对网站主来说工作量太大,涉及到两个站使用一个数据库,分别制作两套模板的问题,而自适应网页的设计只需通过CSS来实现。

下面这个是最简单的PC版网站结构:

星期二, 06 2月 2018 22:01

怎么修改网站的css让它适应手机端

Written by

在HTML源文件中的头部head加入:

1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

具体meta标签的含义自己可以查一下,学习一下,根据自己的情况设定。

2. 给对应的屏幕尺寸写单独的代码css样式表里写:@media screen and (min-width:640px){这里面写手机端标签的代码,例如,body{font-size:18px}, banner{width:640px}},根据自己的需求调整下字体大小,尺寸等。

 

注:@media标签要放在PC样式的下方,不然模式识别前面的标签会导致PC也显示这个样式。

 

响应式网站用框架比较方便,对于各个屏幕的大小需要做之前好好规划,应用百分比让网站自适应,缺点但不利于SEO,显示内容与PC、PAD基本都是一致的内容。