CSS如何让网站适应手机屏幕?

html-css022

CSS如何让网站适应手机屏幕?,第1张

并不是加了meta标签,网站就会自适应手机屏幕了,还需要更改一些样式。

你图片上显示搜索框的宽度是568px,但是页面的宽度只有375(iPhone X的页面显示宽度),所以肯定会超出去,发生显示不全的情况

这种情况你可以使用media标签来做自适应

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

    .search{width:300px}

}

上面代码的意思是当页面宽度小于400px的时候  就让.search的宽度变成300px。你可以吧上面的代码加到你的css里面看一下效果

不是随便添加句话就可以自适应手机屏幕的,没这么简单。如果要自适应手机,是要用到rem单位的,然而rem又要搭配媒体查询来使用。

例如你的设计稿如果是宽720px的话,那你的文字就要以原始大小除以11.25,例如16px的话就要16/11.25这样来计算。我的意思是不用像素,用rem,因为px是写死的,rem是可以适应手机端的(包括盒子的宽高都是要以rem来计算)。另外,用之前要把下面这段代码放到你css文件里:

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

html, body {

font-size: 16.875px

}

}

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

html, body {

font-size: 15px

}

}

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

html, body {

font-size: 12.5px

}

}

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

html, body {

font-size: 11.25px

}

}

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

html, body {

font-size: 10px

}

}

如果宽是720,就除以它相对应的那个值,如果是宽960,就除以960相对应的那个值,这么说应该可以明白吧。

纯手打,望采纳~

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

首先,在网页代码的头部,加入一行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:300pxborder:1px solid #000margin: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选择加载。祝你好运!