下面的代碼放在網站上PC顯示正常，可是手機打開就不正常了，怎么可以改進下讓他編程自適應呢，謝謝大佬們了
手機顯示的
<style>
@charset "utf-8";
/* CSS Document */
body{
background-color:#FFFFFF;
}
div.__01 {
margin:0 auto;
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;
}
</style>
<div class="__01" id="baihe_ID">
<div class="baihe-01_"></div>
<div class="baihe-02_"></div>
<div class="baihe-03_"></div>
<div class="baihe-04_"></div>
<div class="baihe-05_"></div>
</div>
uj5u.com熱心網友回復：
兩個設備解析度都不一樣媒體查詢 兩套代碼
uj5u.com熱心網友回復：
那我要怎么改才能正常啊！~~~
uj5u.com熱心網友回復：
在寫一套適配手機端解析度得css代碼
uj5u.com熱心網友回復：
去菜鳥教程看一css的媒體查詢怎么用uj5u.com熱心網友回復：
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了
uj5u.com熱心網友回復：
刪格怎么寫，有案例嗎uj5u.com熱心網友回復：
直接用rem作為單位 慢慢調吧
uj5u.com熱心網友回復：
這種案例我做了不少，最簡單的是用flex布局，不需要其他什么外部檔案，但是我還想喜歡用bootstrap做移動端和pc端的自適應，你可以去看看https://www.runoob.com/bootstrap/bootstrap-grid-system.htmluj5u.com熱心網友回復：
一個html兩個css。當解析度不同時呼叫不同cssuj5u.com熱心網友回復：
Bootstrap框架的柵格布局、flex布局、流式布局（百分比布局）、媒體查詢+rem等都可以實作吧uj5u.com熱心網友回復：
rem為單位uj5u.com熱心網友回復：
百度下css的媒體查詢，根據不同的解析度寫不同的樣式代碼uj5u.com熱心網友回復：
這個比較真實
uj5u.com熱心網友回復：
我這里PC和手機都能全部顯示圖片，沒有樓主只顯示部分圖片的情況啊
uj5u.com熱心網友回復：
直接用bootstrapuj5u.com熱心網友回復：
bootstrap不就可以么，為什么不用呢uj5u.com熱心網友回復：
bootstrap+百分百布局 自適應就行了轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/67211.html
標籤：HTML(CSS)