如何添加CSS让页面自适应手机屏幕

做阿里巴巴手机端装修遇到的问题,做的页面切好上传以后预览超出屏幕外,我是想让整个切片页面适应屏幕,求大神帮解决一下!

无论是电脑还是手机,要做到自适应屏幕,其实都是一样的。


首先,在网页代码的头部,加入一行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个回答  2018-03-31

    首先,在网页代码的头部,加入一行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排错将导致判断失效。

本回答被网友采纳

怎样让手机版网页自适应手机屏幕宽度?
在手机上不能固定宽度,要按百分比写页面宽度。才能自适应设备。主要是这两点,当然细节上面还有很多和PC端不一样的地方。指向文件错误,比如你的网页文件在A,但是你却指向了B。你把指向的文件放到网页文件内在试试。如果下载下来的图片大小规格完全一样的话,在photoshop中设置一个动作,就能批量处理了。

怎样让手机版网页自适应手机屏幕宽度
要让手机版网页自适应手机屏幕宽度,可以采取以下几种方法:1. **使用``标签**:在HTML文档的``部分添加``。这个`viewport`标签告诉浏览器如何控制页面的尺寸和比例,使得网页能够自适应不同设备的屏幕宽度。`width=device-width`确保网页宽度等于设备屏幕宽度,`initial-scale=1.0`设置初始缩放比例。2...

如何添加CSS让页面自适应手机屏幕
首先,在网页代码的头部,加入一行viewport标签viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。即让viewport的宽度等于物理设备上的真实分辨率,不允许用户缩放。其次:网页宽...

怎么修改网站的css让它适应手机端?
1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的标签中,输入meta代码:。3、浏览器运行index.html页面,此时PC端的网页在移动端上也能自动适配。

怎么让网页自适应怎么让网页自适应屏幕大小
1.一种自适应建立计算机站网站的方法 全屏宽度主要在于CSS代码,将宽度设置为100%,而不是固定的像素值。代码如下。手机网络设置的自适应方法:在网页标题中添加这样一个meta标签:解释:怎么让chrome或者自带浏览器自动适应手机屏幕?chrome或者自带浏览器自动适应手机屏幕不是取决于浏览器的设置,而是取决于所...

自适应手机屏幕代码
自适应手机屏幕代码: 首先就是自适应(说白了就是用百分比来设宽度),最外框肯定是用百分比的,但是一些小的部分就不能用百分比了,不然就会变形,就比如你说的图片,图片尽量定死了,不然不同的手机屏幕大小不一定,所显示的就不一样,甚至会变形了。你可以通过控制图片外面的DIV来控制位置,让它...

自适应屏幕大小的网页是怎么做出来的
安卓壁纸怎么设置能自适应屏幕大小 TextView 的属性 android:layout_height 和 android:layout_width 你设置的是wrap_content吧? 改成固定值如: android:layout_height="60dip" android:layout_width="60dip"如何用JS控制网页字体大小,使其能够自适应屏幕大小 1.首先,在网页代码的头部,加入...

怎样让手机版网页自适应手机屏幕宽度?
为了让手机版网页自适应手机屏幕宽度,开发者需要采用响应式设计的方法。响应式设计是一种网页设计方法,旨在使网页能够自动调整其布局和元素大小,以适应不同设备的屏幕尺寸和分辨率。这种方法通过使用流式布局、弹性图片和媒体查询等技术来实现。具体来说,开发者需要设置合适的CSS样式,使得网页元素能够根据...

如何让网页自适应屏幕大小
想要网页宽度自适应,需要把网页元素宽度设置为百分比,还要在网页头部加上代码:。图片自适应,且不超过原始大小,需要设置最大宽度,代码如下:img{ width:100%; max-width:100%;}。改进功能 浏览器首次使用时,根据用户显示分辨率大小决定是否默认显示收藏栏;打开多个标签关闭浏览器时,提示用户确认;...

如何让网站自适应手机
关于网站如何做到自适应网页,可根据如下操作:首先,在网页代码的头部,加入一行viewport元标签。viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩 放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。由于网页会根据屏幕宽度调整...

相似回答