❶ 自適應手機屏幕的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相對應的那個值，這么說應該可以明白吧。
純手打，望採納~
❷ css圖片自適應手機屏幕
1）按你的操作，讀取當前的寬度然後設置到樣式中：
var h = $(window).width();
$(".mymsg").css("width", h);
2）css操作：
設置一個div，設置div的寬度為100%，然後設置img的寬度為100%
❸ div+css的四行自適應手機端屏幕布局怎麼寫高度、寬度為自適應100%，即為滿屏顯示
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
.line1,.line4{
position:absolute;
width:100%;
height:50px;
z-index:5;
}
.line1{
top:0;
}
.line2{
position:relative;
height:50%;
z-index:1;
}
.line3{
position:relative;
height:50%;
z-index:1;
}
.line4{
bottom:0;
}我想你要表達是是高50吧？不太會表述，還是直接給你上代碼吧
❹ 如何添加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選擇載入。祝你好運！
❺ css3怎樣實現屏幕自適應
/* 列印樣式 */
@media print {
color: red;
}
/* 手機等小屏幕手持設備 */
@media screen and (min-width: 320px) and (max-width: 480px) {
body {
background: yellow;
}
}
/* 平板之類的寬度 1024 以下設備 */
@media only screen and (min-width: 321px) and (max-width: 1024px) {
body {
background: blue;
}
}
/* PC客戶端或大屏幕設備: 1028px 至更大 */
@media only screen and (min-width: 1029px) {
body {
background: green;
}
}
/* 豎屏 */
@media screen and (orientation:portrait) and (max-width: 720px) {對應樣式}
/* 橫屏 */
@media screen and (orientation:landscape){對應樣式}
手機、平板設備屏幕尺寸眾多，寬度不一，寫手機、平板對應css時最好用百分比寬度來自適應各種大小不一的屏幕寬度。這個百分比尺寸不算太難但也不是個太輕便的活，如果你css不熟練的話最好先別折騰這塊，把基礎練好了來。
還有，用了css媒體查詢後，ie6-8載入不了樣式表，要引用個：Respond.js來讓ie6-8下正確載入css。js自行網路，到處有下載。
❻ css3 手機端怎麼高度自適應
一般是寬度為響應式的，在手機端，要使用rem作為單位，這樣可以使手機解析度在發生變化時，高度和寬度同時發生改變。
現在開始流行使用rem作為手機端的單位，淘寶，京東都是用rem。
❼ 自動換行 css 自適應 寬度不能用固定的，因為必須要適應各類手機，求方法
兩種方式：一種方式，手機站css設置的時候全部用百分比來控制，這樣所有的頁面都會自動縮放；
第二種方式：需要你來判斷瀏覽器的或者應該說是手機屏幕的大小，來設置其css樣式：如：
當然我只是舉個例子，其餘的樣式你可以自己設置，你設置個最大寬度與最小寬度max-width與min-width，一般都是320px--640px手機；
@media screen and (max-width:360px){body{font-size:12px}}
@media screen and判斷如果瀏覽器寬度小於360px的話，執行樣式，文字大小為12px
@media screen and (min-width:400px){body{font-size:18px}}
意思：判斷瀏覽器寬度大於400px的時候，執行樣式，文字大小為18px；
❽ CSS如何讓網站適應手機屏幕
並不是加了meta標簽，網站就會自適應手機屏幕了，還需要更改一些樣式。
你圖片上顯示搜索框的寬度是568px，但是頁面的寬度只有375（iPhone X的頁面顯示寬度），所以肯定會超出去，發生顯示不全的情況
這種情況你可以使用media標簽來做自適應
@mediaonlyscreenand(max-width:400px){
.search{width:300px}
}上面代碼的意思是當頁面寬度小於400px的時候 就讓.search的寬度變成300px。你可以吧上面的代碼加到你的css裡面看一下效果
❾ css3怎樣實現屏幕自適應
試用css3 語法@media screen and (判斷屬性){ CSS樣式選擇器 }
1、DIV+CSS小案例描述
根據整體來設置，設置他們的最大寬度(width)為640px，最小寬度為320px，此類設置適用於手機移動端；要實現屏幕自適應，那麼就要用百分比來實現；所以設置width整體100%；img寬度100%；這樣實現圖片的自由縮放；