CSS-根据屏幕大小选择样式

.hidden-xs: 当屏幕宽度<768px时隐藏

.hidden-sm: 当屏幕768px <= 宽度<992px时隐藏

.hidden-md: 当屏幕992px<= 宽度<1200px时隐藏

.hidden-lg: 当屏幕宽度>1200px时隐藏

 

以下为css3的 媒体查询

@media screen and (max-width: 768px) {
    .hidden-xs{
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width:992px) {
    .hidden-sm {
        display: none;
    }
}

@media screen and (min-width: 992px) and (max-width:1200px) {
    .hidden-md {
        display: none;
    }
}

@media screen and (min-width: 1200px) {
    .hidden-lg {
        display: none;
    }
}

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 HTML 中使用 postcss-pxtorem 实现自适应屏幕的步骤如下: 1. 安装 postcss-pxtorem 插件: 可以使用 npm 安装:`npm install postcss-pxtorem --save-dev` 2. 在项目中创建 postcss.config.js 文件: 在项目根目录下新建一个 postcss.config.js 文件,用于配置 postcss-pxtorem 插件。 ```javascript module.exports = { plugins: { "postcss-pxtorem": { rootValue: 16, // 根字体大小,16px 为默认值 propList: ["*"] // 需要转换的 CSS 属性,默认为 ['*'] } } }; ``` 3. 在项目中安装并使用 postcss-loader: postcss-loader 可以帮助我们在构建项目时自动运行 postcss 插件。 可以使用 npm 安装:`npm install postcss-loader --save-dev` 在 webpack 配置文件中添加 postcss-loader: ```javascript module.exports = { module: { rules: [ { test: /\.css$/, use: [ "style-loader", "css-loader", { loader: "postcss-loader", options: { ident: "postcss", plugins: [require("postcss-pxtorem")()] } } ] } ] } }; ``` 4. 在 CSS 中使用 px 单位编样式: 在 CSS 中使用 px 单位编样式,postcss-pxtorem 插件会自动将其转换为 rem 单位。 例如,假设设计稿中某个元素的宽度为 100px,那么在 CSS 中可以这样: ```css .box { width: 100px; } ``` 在 postcss-pxtorem 插件的转换下,该样式会被转换为: ```css .box { width: 6.25rem; /* 假设根字体大小为 16px */ } ``` 通过以上步骤,就可以在 HTML 中使用 postcss-pxtorem 实现自适应屏幕了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值