响应式开发学习之旅-------移动端样式处理方法+再看css选择器

在pc端样式确定后，实现移动端样式

主要靠媒体查询

 

书写位置：

可以写在最后面，****可以写在有修改的旁边

 

确定断点：可以根据设计稿来决定，如果哪端的用户比较多，可以更加细分

@media only screen and (max-width:800px){}
@media only screen and (min-width:481px) and (max-width:800px){}
@media only screen and (max-width:480px)

媒体查询中的rem不是基于html的，而是基于浏览器的。所以用rem很可能出问题。所以建议用px

再看css选择器

基本选择器
    *
    E
    .class
    #id
    E F
    E > F
    E + F
    E ~ F
属性选择器
    E[attr]
    E[arrt='value']
    E[attr^='value']   以value开头
    E[arrt$='value']   ...结尾
    E[arrt*='value']   包含
    E[arrt~='value']   属性为若干个单词，以空格区分，其中包含value
    E[arrt|='value']   属性为若干个单词，以-区分，其中包含value
伪类和伪类选择器
    :link,:visited,:hover,:active,:focus
    :enabled,:disabled,:checked
    :first-child
    :last-child
    :nth-of-child()
    :nth-of-type()      //类型为xxx的第n个子元素
    :nth-last-of-type()
    :first-of-type()
    :last-of-type()
    :only-child()
    :only-of-type()
    :empty  //里面什么也没有
    :not()  //括号里不能有伪类选择器
    :first-line,:first-letter:before,:after   //伪元素选择器