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-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>

css3网站响应式写法

原文：https://www.cnblogs.com/newmiracle/p/11872522.html