这篇文章上次修改于 3 个月前,可能其部分内容已经发生变化,如有疑问可询问作者。

前言

最近开始折腾另一个项目(暂时不透露哈哈哈哈)需要用到自适应布局,于是就探究了一下~

实现方法

首先得引入CSS3 @media 媒体查询器
media的使用和规则:
  ①被链接文档将显示在什么设备上。
  ②用于为不同的媒介类型规定不同的样式。
语法:

实例:

在实际应用的时候,首先得在HTML的头文件 <head>里上加入以下代码:

前言

最近开始折腾另一个项目(暂时不透露哈哈哈哈)需要用到自适应布局,于是就探究了一下~

实现方法

首先得引入CSS3 @media 媒体查询器 scode type="blue" media的使用和规则:
  ①被链接文档将显示在什么设备上。
  ②用于为不同的媒介类型规定不同的样式。 /scode
语法:

实例:

在实际应用的时候,首先得在HTML的头文件 <head>里上加入以下代码:

解释:  

width = device-width:宽度等于当前设备的宽度
initial-scale:初始的缩放比例(默认设置为1.0)
minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)

因为media的类型很多,这里就发菜鸟教程的对应链接了:
下面是media类型的screen(用于电脑屏幕,平板电脑,智能手机等):**

css自适应屏幕大小

解释:

告诉浏览器当屏幕大于320px,并小于1156px下执行此代码

定制不同屏幕的显示样式:

解释:  

width = device-width:宽度等于当前设备的宽度
initial-scale:初始的缩放比例(默认设置为1.0)
minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)

因为media的类型很多,这里就发菜鸟教程的对应链接了:
下面是media类型的screen(用于电脑屏幕,平板电脑,智能手机等):**

css自适应屏幕大小

解释:

告诉浏览器当屏幕大于320px,并小于1156px下执行此代码

定制不同屏幕的显示样式:

亲亲留个评论再走呗

正在加载评论区...