2020-11-04 HTML响应式网页 不同分辨率的显示

第一次写啊。小紧张。

写一波HTML网页在PC端和手机端的不同分辨率的转换

直接语法：

                  @media 设备名 only (选取条件) not(选取条件) and(设备选取条件)

                                  {

                                                   CSS样式规则

                                  }

其中字符间以空格相连，选取条件包含在小括号内，CSS样式规则为兼容设置的样式表，包含在中括号里面。onli(限定某种设备，可省略)、

and（逻辑与）、和 not（排除某种设备）为逻辑关键字，多种设备的话用逗号分隔开。

 

因为网页在PC端和手机端是不同的分辨率，所以如果没有转换的话一但换了显示设备就会出现尴尬的情况

HTML分样式表中内嵌和外连CSS

外连CSS：

1.all代表所有设备

2.max-width代表支持的最大的宽度

                  @media all and (max-width:1024px){

                                     /*适合低分辨率桌面浏览器和横屏*/

                              }

                  @media all and (max-width:768px){

                                     /*适合低分辨率桌面浏览器和竖屏iPad*/

                              }

                  @media all and (max-width:480px){

                                     /*适合横屏iPone/Android*/

                              }

                  @media all and (max-width:320px){

                                     /*适合竖屏iPone/Android*/

                              }

                  @media all and (max-width:480px){

                                     /*适合低分辨率移动设备（洛基亚：-））*/

                              }

多个分辨率：

                  @media all and (max-width:240px) , all and (max-width:320px){

                           }

 

 

在link中使用@media：

1.适合普通分辨率桌面浏览器和横屏iPad

<link rel="stylesheet" type="text/css" media="all and (max-width:1024px)" href="pc.css"/>

2.适合低分辨率桌面浏览器和竖屏iPad

<link rel="stylesheet" type="text/css" media="all and (max-width:768px)" href="pc.css"/>

3.适合横屏iPhone/Android

<link rel="stylesheet" type="text/css" media="all and (max-width:480px)" href="pc.css"/>

4.适合竖屏iPhone/Android

<link rel="stylesheet" type="text/css" media="all and (max-width:380px)" href="pc.css"/>

主要的一些转换就这些，只要转换到位，那么在不同设备显示时就不会在出现因为分辨率不同而造成的小尴尬