QQ登录

只需一步,快速开始

普拓源码论坛

查看: 43|回复: 0

分享如何在代码中添加CSS让网站页面自适应手机屏幕

[复制链接]

38

主题

48

帖子

163

积分

版主

Rank: 7Rank: 7Rank: 7

积分
163
发表于 2019-8-13 13:53:50 | 显示全部楼层 |阅读模式
无论是电脑还是手机,要做到自适应屏幕,其实都是一样的。首先,在网页代码的头部,

加入一行viewport标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,

minimum-scale=1.0, user-scalable=no" />

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),

原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

即让viewport的宽度等于物理设备上的真实分辨率,不允许用户缩放。

其次:网页宽度css一定要使用百分比width: xx%;,不能用绝对像素。当然可以用width:auto;

流动布局:

.left{

float: left;

width: ***%;

}

选择加载css:

这是自适应的关键部分

.abc{ height:300px; border:1px solid #000; margin:0 auto}

@media screen and (min-width: 1201px) {

.abc {width: 1200px}  

}

/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */

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

.abc {width: 900px}  

}

/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */

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

.abc {width: 200px;}  

}

/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */

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

.abc {width: 100px;}  

}

/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */

需要注意是CSS代码顺序,由大到小排版CSS(判断浏览器宽度越大越放前),这样是因为逻辑关系,@media 判断CSS排错将导致判断失效。

图片自适应:

img { max-width: 100%;}

老版本的IE不支持max-width,所以只好写成:img { width: 100%; }

筚五、采用相对字体大小

字体也不能使用绝对大小(px),而只能使用相对大小(em)。

这里最重要的,是流动布局:选择加载css:,对于懒人可以使用下列代码:
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /><div style="width:10%;
  2. .left{
  3. float: left;
  4. width: 10%;
  5. }
  6. .abc{ height:300px; border:1px solid #000; margin:0 auto}
  7. @media screen and (min-width: 1201px) {
  8. .abc {width: 1200px}  
  9. }
  10. @media screen and (max-width: 1200px) {
  11. .abc {width: 900px}  
  12. }
  13. @media screen and (max-width: 901px) {
  14. .abc {width: 200px;}  
  15. }
  16. @media screen and (max-width: 500px) {
  17. .abc {width: 100px;}  
  18. }
  19. img { max-width: 100%;}"></div>
复制代码


阿里云服务器
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|手机版|小黑屋| 普拓源码论坛 ( 湘ICP备16004512号-2 )

GMT+8, 2019-10-15 14:54 , Processed in 0.079075 second(s), 21 queries .

Powered by Discuz! X3.4

© 2015-2017 普拓信息

快速回复 返回顶部 返回列表