css基础媒体查询和rem

2024-05-06 18:42:48

https://m.suning.com/
https://m.jd.com/

rem

em 相对父元素font-size大小
rem 相对html 的font-size大小

媒体查询

有时候我们使用一个网页，调整浏览器窗口大小的时候，神奇的发现，这个页面竟然可以自动的变化，这个效果很有可能就是通过媒体实现的
@media screen and (){
.element{
}
}

如何在不同大小设备上修改不同的html字体大小呢？
@media 不同屏幕尺寸设置不同的样式

直接在chrome中写媒体查询还不生效，需要配置,为什么呢？
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
css样式重叠性，后面会覆盖前面的

媒体查询+ rem 实现元素

媒体查询一般从小到大

不同的屏幕尺寸引入不同的css文件，也就是在link上使用media

<link rel="stylesheet" href="style320.css" media="screen and (min-width:320px)"><link rel="stylesheet" href="style640.css" media="screen and (min-width:640px)">

less

http://lesscss.org/
less：It’s CSS, with just a little more.

vscode中使用easy less插件

命令行 lessc less文件名称 生成的css文件名
变量@
运算符 + - * /
带着单位的运算，两个都有单位，以第一个为准
less导入语法 @import “common.less”;

flexible.js
rem

核心代码

var rem = docEl.clientWidth / 10docEl.style.fontSize = rem + 'px'

cssrem

cssrem默认为font-size为16px，所以你需要修改下, command + ,

使用

!important让 css提权

超过750px还是使用750px

css基础媒体查询和rem相关推荐

html5响应式媒体查询,css基于媒体查询和 rem 的响应式布局实践
我们开发一个网站的时候希望在手机端.iPad 端.PC 端都有良好的体验,CSS 给我们提供了一个强大的条件判断语法,可以根据设备的宽度来设置不同的样式,从而实现不同的设备应用不同的布局. 下图展示了 ...
CSS：媒体查询 CSS3 Media Queries
定义和使用使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...
android 媒体查询,CSS常用媒体查询应用
原标题:CSS常用媒体查询应用媒体类型媒体类型 sans - serif字体比较适合在屏幕上阅读,而 serif 字体更容易在纸上阅读. 媒体查询包含一个可选的媒体类型和零个或多个满足CSS3规范 ...
前端CSS @media 媒体查询PC端
前端CSS @media 媒体查询PC端注意and后面跟一个空格 @media screen and (min-width: 1024px){body{font-size: 12px} } /*&g ...
【css】媒体查询（总结）
[css]媒体查询文章目录 [css]媒体查询写在前面媒体查询: 一.认识viewport 二.关于三个viewport的理论 layout viewport(布局视口) visual view ...
css媒体查询、rem，适配不同分辨率手机(分享)
文章目录 1. 常见的手机分辨率 2. 媒体查询的基本介绍 3.配合less达到适配不同分辨率手机 1. 常见的手机分辨率 320px.360px.400px.500px.640px.720px.75 ...
媒体查询配合rem使用（HTML+CSS学习笔记二十一）
媒体查询 + rem 计算方法计算rem方法: 结合媒体查询 -> 随着设备的改变更改html font-size的值. 媒体查询确定范围?? 移动端设计图 : 640px 750p ...
深入理解CSS Media媒体查询
前面的话一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
基于媒体查询和 rem 的响应式布局实践
本文首发于 dawei.lv 媒体查询 @media 我们开发一个网站的时候希望在手机端.iPad 端.PC 端都有良好的体验,CSS 给我们提供了一个强大的条件判断语法,可以根据设备的宽度来设置不同 ...

最新文章

热门文章