html5移动端开发(rem和媒体查询@media)

css下：index.css

@charset "utf-8";
body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select,figcaption,figure{margin: 0;padding: 0;}
/* 添加怪异盒，margin和padding就不用减 */
*{box-sizing: border-box;}
body{font-family: "微软雅黑";}
body,html{height:100%}
h1,h2,h3,h4,h5,h6{font-size: 16px;font-weight: normal;}
a,u{text-decoration: none;}
b,strong{font-weight: normal;}
i,em{font-style: none;}
ul,ol,li{list-style:none}
img{display:block;border: 0;}
input{outline: none;border: 0;}

css下：common.css

@charset "utf-8";
body{display: flex;flex-direction: column;overflow-y: hidden;}/* header */
header{height:3.67rem;background: #0dc441;display: flex;justify-content: center;align-items: center;}
header span{display: block;width: 5.04rem;height: 2rem;background: #64d985;text-align: center;line-height: 2rem;
font-size: 12px;color: #fff;}
header span:last-child{background: #3dd067;border-radius: 0 1rem 1rem 0;}
header span:first-child{border-radius: 1rem 0 0 1rem;}
/* nav */
nav{height:2.96rem;border-bottom: 1px solid #d9d9d9;display: flex;}
nav li{flex: 1;text-align: center;height: 2.96rem;line-height: 2.96rem;
font-size: 14px;color: #666;}
nav .active{border-bottom: 2px solid #3dd067;}
/* mian */
main{flex:1;overflow: auto;}
main section{display: flex;flex-wrap: wrap;justify-content:space-between ;}
figure{width: 13.15rem;border: 1px solid #ccc;margin: 0.41rem;}
figure img{width: 100%;}
figcaption{border-top: 1px solid #ccc;height: 2.46rem;line-height: 2.46rem; text-align: center;color:#333}
/* footer */
footer{height: 3.67rem;background: #ccc;border-top:1px solid rgba(255,0,0,0.5);padding: 0 1.25rem;display: flex;justify-content: space-between;background: pink;}footer div{background: #008000;display: flex;flex-direction: column;justify-content: center;align-items: center;}footer div span{font-size: 12px;}
footer div:nth-child(3){width: 4.37rem;height: 3.67rem;position: relative;}
footer div:nth-child(3) img{width: 100%;position: absolute;bottom: 0;}/* 媒体查询 */
@media all and (max-width:320px) {html{font-size: 12px;}
}
@media all and (min-width:321px) and (max-width:375px) {html{font-size: 14px;}
}
@media all and (min-width:376px) {html{font-size: 16px;}
}/* ps中设计图640pxdpr 2两处height88px88px/2==44px
*/

html5主页面：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport"content="width-device-width,initial-sacle=1.0,maximum-scale=1.0,user-scalable=no"><title></title><link rel="stylesheet" type="text/css" href="css/index.css"/><link rel="stylesheet" type="text/css" href="css/common.css"/><style type="text/css"></style></head><body><!-- header --><header><span>热点</span><span>关注</span></header><!-- nav --><nav><li class="active">足球现场</li><li>足球生活</li><li>足球宝贝</li></nav><!-- main ie不识别--><main><section><figure><img src="img/6.jpg" ><figcaption>蜡笔小新</figcaption></figure><figure><img src="img/6.jpg" ><figcaption>蜡笔小新</figcaption></figure><figure><img src="img/6.jpg" ><figcaption>蜡笔小新</figcaption></figure><figure><img src="img/6.jpg" ><figcaption>蜡笔小新</figcaption></figure><figure><img src="img/6.jpg" ><figcaption>蜡笔小新</figcaption></figure><figure><img src="img/6.jpg" ><figcaption>蜡笔小新</figcaption></figure><figure><img src="img/6.jpg" ><figcaption>蜡笔小新</figcaption></figure><figure><img src="img/6.jpg" ><figcaption>蜡笔小新</figcaption></figure><figure><img src="img/6.jpg" ><figcaption>蜡笔小新</figcaption></figure><figure><img src="img/6.jpg" ><figcaption>蜡笔小新</figcaption></figure><figure><img src="img/6.jpg" ><figcaption>蜡笔小新</figcaption></figure></section></main><!-- footer --><footer><div><!-- <img src="data:images/11.jpg"></i> --><span>首页</span></div><div><!-- <img src="data:images/11.jpg"></i> --><span>首页</span></div><div><img src="data:images/11.jpg"></i><span>首页</span></div><div><!-- <img src="data:images/11.jpg"></i> --><span>首页</span></div><div><!-- <img src="data:images/11.jpg"></i> --><span>首页</span></div></footer></body>
</html>
<!-- 弹性盒媒体查询remdpr-->

html5移动端开发(rem和媒体查询@media)相关推荐

vscode使用rem、媒体查询@media（图文详解，代码展示）
rem适配布局一.rem单位 em是相对于父元素的字体大小来说的,例:父亲的font-size:10px,孩子的width:10em表示是100px: rem是相对于html的字体大小,例: ...
rem结合媒体查询适配的vue项目（PC端和移动端共用一套代码）
一.前言上周四接到了一个简单的纯前端网页的项目,我用了三天时间已经开发并且部署完毕(为了实现快速简易部署,使用了gitee pages进行部署,这篇文章记录我使用gitee pages部署的详细过程 ...
移动端适配+响应式布局+从设计图到CSS（rem+viewport+媒体查询+Sass）
转自:https://www.cnblogs.com/gymmer/p/6883063.html 根据UI图对移动端的h5页面做样式重构,是前端工程师的本职工作,看似简单,不过想做好却并不容易.下面总 ...
移动开发—媒体查询(Media Query)
移动开发-媒体查询(Media Query) 1.使用@media,可以针对不同的媒体类型定义不同的样式 2.@media可以针对不同的屏幕尺寸设置不同的样式 3.当你重置浏览器大小的过程中,页面也会 ...
css3的媒体查询(Media Queries)
css3的媒体查询(Media Queries) 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesh ...
CSS媒体查询“@media”在调试中切换移动设备时不起作用。
今天在学习CSS响应式网页设计中的媒体查询,遇到个有趣的问题,主要就是在调试过程中切换移动设备和电脑,同样的代码将有不同的结果.在切换移动设备调试时@media对于"max-width=97 ...
html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度
显示网页的终端屏幕分辨率大小不一,为了能使同一网页能在不同的终端中合适显示,CSS3 推出了媒体查询media.用媒体查询media能根据屏幕分辨率大小确定网页宽度,这主要在 CSS 文件中根据屏幕分 ...
媒体查询@media query
@media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...
CSS3的媒体查询@media
CSS3的媒体查询@media 通过@media可以针对不同屏幕大小定义不同样式的网页,页面会根据浏览器长宽来渲染页面. 语法: @media mediaType and|not|only (medi ...

html5移动端开发(rem和媒体查询@media)

html5移动端开发(rem和媒体查询@media)相关推荐

最新文章

热门文章