media jquery 響應頁面尺寸

2021-09-20 17:12:26 字數 1627 閱讀 6982

device-pixel-ratio:定義輸入裝置螢幕的可視寬度與可見高度比率。device-width:輸入裝置螢幕的可視寬度。

device-width:輸入裝置螢幕的可視寬度。

orientation :螢幕橫豎屏定向。landscape 是橫向,portrait 是縱向【ipad 相反】

/* iphone 4 ———– */

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5)

/* ipads (portrait) ———– */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)

/* smartphones (portrait and landscape) ———– */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px)

/* smartphones (landscape) ——— */

@media only screen and (min-width : 321px)

/* smartphones (portrait) ———– */

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

/* ipads (portrait and landscape) ———– */

@media only screen and (min-device-width : 768px)and (max-device-width : 1024px)

/* ipads (landscape) ———– */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)

and (orientation : landscape)

/* ipads (portrait) ———– */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)

and (orientation : portrait)

/* desktops and laptops ———– */

@media only screenand (min-width : 1224px)

/* large screens ———– */

@media only screen and (min-width : 1824px)

響應式頁面設計

響應式頁面 1 viewport檢視 首先在頭部插入 其中,width 控制viewpoint的寬度,可以是固定值,也可以是device width,即裝置的寬度。2 呼叫不同的css檔案 在不同頁面大小下頁面由不同的css控制,這時候需要用 這表示頁面寬度如果在614 810px,就呼叫外部的in...

頁面狀態響應碼

狀態響應碼 200 299 表示服務端已經成功接收請求,並完成了全部處理過程。400 499 表示客戶端的請求有錯誤。500 599 表示服務端出現錯誤 http 錯誤 400 400 請求出錯 由於語法格式有誤,伺服器無法理解此請求。不作修改,客戶程式就無法重複此請求。http 錯誤 401 40...

關於響應式頁面

作為乙個無線部門的人,不懂移動裝置是不行的。而作為乙個無線的重構 不會寫響應式 頁面更是不行得。而我,乙個無線的重構 在我最近做的乙個移動端的專案之前,的確是不會寫響應式 頁面的,所以,嚴格來說,在這個專案之前,我是乙個不合格的無線重構 人。而這個專案,卻讓我快速地掌握了響應式頁面重構的一些方法。下...