×
  • 反应– The Complete Guide (incl. 反应Router 4 & Redux)

  • 34 – Adding 的CSS Media Queries for 反应

    课程清单
    [为React添加CSS媒体查询,为React添加CSS媒体查询]

    在上一课中,我们学习如何使用伪元素或伪选择器,以及如何嵌套类并仍将其导入该类对象。现在要注意媒体查询。

    用于React的CSS媒体查询

    We will add some media queries and that was somthing I wanted to do in my .Person class in Person.js .

    src / Person / Person.js
    
    import 反应from 'react';
    import PersonClasses from './Person.css';
    const person = props => {
    	return (
    		<div className={PersonClasses.Person}>
    			...
    		</div>
    	);
    };
    export  默认  person;
    

    现在让我们在我们的媒体中添加一些媒体查询 人.css 文件。

    src /人/Person.css
    
    .Person {
    	width: 60%;
    	margin: 16px auto;
    	border: 1px solid #eee;
    	box-shadow: 0 2px 3px #ccc;
    	padding: 16px;
    	text-align: center;
    }
    
    @media (min-width: 500px) {
    	.Person {
    		width: 450px;
    	}
    }
    

    The media query will just adjust our .Person class the width: 450px if we have a view port being broder the 500px.
    We can save this adjusted 的CSS file and it will still import this peron class fine on the PersonClasses in Person.js 即使将其包装在媒体查询中。
    Now just simply save the file and adjust the width to see the .Person is been adjusted based on screen width.


    如果以前的课程被跳过:
    仅当您为应用程序启用了CSS模块时,此方法才有效
    你可以在这里找到: 在React中启用和使用CSS模块
    反应introduction
    反应Component
    为React添加CSS媒体查询
  • 启用通知    不用了,谢谢