css3网站响应式写法

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-1350px)">

<!--ipad和手机公用的css-->
<link rel="stylesheet" href="{$yuming}/css/mobpadcommon.css" media="(max-1349px)">

<!-- ipad和笔记本 -->
<link rel="stylesheet" href="{$yuming}/css/ipadcommon.css" media="(min-768px) and (max-1349px)">
<!-- 手机/-->
<link rel="stylesheet" href="{$yuming}/css/mobilecommon.css" media="(max-767px)">
</pre>

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

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

手机端写 全部自适应

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

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