怎么让代码编程自适应PC和手机显示呢

显示全部楼层 · 2021-1-27 05:20:11

下面的代码放在网站上PC显示正常，可是手机打开就不正常了，怎么可以改进下让他编程自适应呢，谢谢大佬们了

手机显示的

@charset"utf-8";
/*CSSDocument*/
body{
background-color:#FFFFFF;
}
div.__01{
margin:0auto;
width:960px;
height:1203px;
}
div.baihe-01_{
float:left;
background:url(baihe_01.png);
width:960px;
height:110px;
}
div.baihe-02_{
float:left;
background:url(baihe_02.png);
width:960px;
height:361px;
}
div.baihe-03_{
float:left;
background:url(baihe_03.png);
width:960px;
height:503px;
}
div.baihe-04_{
float:left;
background:url(baihe_04.png);
width:960px;
height:226px;
}
div.baihe-05_{
float:left;
background:url(baihe_05.png);
width:960px;
height:3px;
}

分 -->

千问 · 2021-1-27 05:20:11

两个设备分辨率都不一样
媒体查询两套代码

千问 · 2021-1-27 05:20:11

引用1楼console.log()的回复:两个设备分辨率都不一样
媒体查询两套代码
那我要怎么改才能正常啊！~~~

千问 · 2021-1-27 05:20:11

引用2楼美莎设计的回复:Quote: 引用1楼console.log()的回复:
两个设备分辨率都不一样
媒体查询两套代码
那我要怎么改才能正常啊！~~~
在写一套适配手机端分辨率得css代码

千问 · 2021-1-27 05:20:11

去菜鸟教程看一css的媒体查询怎么用

千问 · 2021-1-27 05:20:11

1.按你现在的写法，要适用手机端就要再加样式，例如下面这样，把你那些写死的width、height在不同的屏幕下再写一遍
/*手机端*/
@media(min-width:480px)and(max-width:767px){
div._01{
...
}
...
}
/*平板电脑*/
@media(min-width:768px)and(max-width:979px){
div._01{
...
}
...
}
/*PC端*/
@media(min-width:980px){
div._01{
...
}
...
}

2.现在弹性布局，流式布局都还不错，使用栅格就不用每次都写死width了

千问 · 2021-1-27 05:20:11

引用5楼潇湘忆梦的回复：1.按你现在的写法，要适用手机端就要再加样式，例如下面这样，把你那些写死的width、height在不同的屏幕下再写一遍
/*手机端*/
@media(min-width:480px)and(max-width:767px){
div._01{
...
}
...
}
/*平板电脑*/
@media(min-width:768px)and(max-width:979px){
div._01{
...
}
...
}
/*PC端*/
@media(min-width:980px){
div._01{
...
}
...
}

2.现在弹性布局，流式布局都还不错，使用栅格就不用每次都写死width了删格怎么写，有案例吗

千问 · 2021-1-27 05:20:11

直接用rem作为单位慢慢调吧

千问 · 2021-1-27 05:20:11

这种案例我做了不少，最简单的是用flex布局，不需要其他什么外部文件，但是我还想喜欢用bootstrap做移动端和pc端的自适应，你可以去看看https://www.runoob.com/bootstrap/bootstrap-grid-system.html

千问 · 2021-1-27 05:20:11

一个html两个css。当分辨率不同时调用不同css