css3响应式写法

因为media不支持ie9以下的浏览器 所有要加个判断

<pre>

<!-- 全部通用的 -->

<link rel="stylesheet" href="{$yuming}/css/common.css?v={$visition}">

<!--[if lte IE 8]>

<link rel="stylesheet" href="{$yuming}/css/pccommon.css?v=<?php echo time() ?>"">

<![endif]-->

<!-- pc -->

<link rel="stylesheet" href="{$yuming}/css/pccommon.css" media="(min-width:1350px)">

<!--ipad和手机公用的css-->

<link rel="stylesheet" href="{$yuming}/css/mobpadcommon.css" media="(max-width:1349px)">

<!-- ipad和笔记本 -->

<link rel="stylesheet" href="{$yuming}/css/ipadcommon.css" media="(min-width:768px) and (max-width:1349px)">

<!-- 手机/-->

<link rel="stylesheet" href="{$yuming}/css/mobilecommon.css" media="(max-width:767px)">

</pre>

PC ipad 尺寸都写死 pc中间内容1350 ipad中间内容宽度768

少用绝对定位 外围高度不要写死

手机端写 全部自适应

 

<strong>注意:如果碰到编辑器编辑生成内容需要自适应的时候 在移动端 图片要设置百分比 编辑图片的时候不能写宽度和高度哦居中就行 文字字体大小不用管</strong>

 

 文字尽量代码写 保证自适应(比方说网站是一排 手机上就2排 如果切图片就只能一排)