移动端自适应处理--css3 @media

作者: stone_yao | 来源:发表于2016-05-25 23:33 被阅读555次

移动端自适应处理--css3 @media
移动端
前端技能
web自适应
Css3 Media Queries详解
移动端自适应处理－sprite
移动端自适应字体处理
移动端自适应处理--dpr
移动端自适应处理--viewport
从面向对象思想的角度来认识前端

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
http://www.w3cplus.com/content/css3-media-queries

The @media rule is used to define different style rules for different media types/devices.

Two syntax---only|not is not always necessary

@media not|only mediatype and (media feature) {
    CSS-Code;
}

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

To use the @media rule to make responsive design,such as

@media only screen and (max-width:500px){
 .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}

移动端自适应处理--css3 @media
http://www.w3schools.com/cssref/css3_pr_mediaquery.asphtt...
移动端
移动端开发和 PC 端开发有哪些区别移动端考虑手机兼容性使用触屏事件布局自适应rem 动画处理CSS3 移...
前端技能
css (flex布局移动端自适应适配 css3动画 css预处理器less/sass) js (re...
web自适应
简单事情简单做-宽度自适应所谓宽度自适应严格来说是一种PC端的自适应布局方式在移动端的延伸。在处理PC端的前端界...
Css3 Media Queries详解
随着移动端的兴起,我们需要适配多种移动端设备,这时候我们就需要用到Media Queries 1.Media Qu...
移动端自适应处理－sprite
我用的是在线的工具CSS Sprite Generator css--所有需要自适应图片的部分加上sprite类 ...
移动端自适应字体处理
设置容器的字体即可
移动端自适应处理--dpr
可伸缩布局方案---这个只是手淘的一个插件移动端高清多屏适配方案---主要参考的是这个概念阐述： 1.物理像素（...
移动端自适应处理--viewport
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/V...
从面向对象思想的角度来认识前端
一提到前端，自然会听到h5,css3，自适应，移动端等等。给人的感觉要么杂乱，要么就是更新太频繁，学习速度跟不上，...