一、PC端响应式设计有哪些?

在如今的一些,前端开发手段里,使用最多的应该是使用bootstrap进行响应式web的开发,那么抛开使用框架的方式来进行代码的书写的话,我个人呢,基本上是使用以下3种方法来进行响应式的设计的。

  1.尽量去使用百分比来进行样式宽度的控制,少用甚至不要去使用固定宽高。

  2.使用css属性里面的媒体对象来进行元素的控制,例如:@media的媒体对象来进行控制,从而使元素可以适用于不同平台的页面加载。

  3.使用弹性盒子来进行开发,实现响应式开发。

二、响应式和自适应的区别?

自适应:

在不同分辨率下不同设备上显示相同的页面。即:根据屏幕的宽度,自动调节网页内容的大小,使其主体内容和布局不变。

响应式布局(百分比响应式布局)

响应式:

响应式的概念应该是覆盖了自适应,但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局。

(1)允许网页的宽度自动的调整

(2)尽量少使用绝对的宽度,多点百分比

(3)相对大小的字体:字体不要使用px写死,最好使用相对大小的em,或者高清方案rem,这个不限制与字体,别的属性也可以这么设置

(4)流式布局,float等float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

(5)选择加载css,,这个意思是如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。