In simple terms, a responsive website is responsive to the device being used to browse the site. Responsive sites re-configure themselves based upon the device being used to browse the site. You usually won't have to "pinch to zoom" a responsive site when browsing from a small format device.
Some sites have mobile specific versions, usually meaning there is a version of the site for desktop (any usually tablet) devices and a different version of the site specifically formatted for mobile devices. Mobile specific sites often contain only a subset of the content featured on the "full" version of the site, and are designed for quick loading and easy navigation on smart phones. Some sites detect whether the device being used to browse them is a smart phone, tablet or desktop device, and then routes the site visitor to the appropriate version of the site.
There are lots of very cool ways to make sites look great and easy to navigate on small screens. At Brewer Marketing, we've created both responsive and mobile specific sites, depending on the needs and requirements of our clients.
For most web sites, we've settled on using responsive frameworks, which reduces or eliminates content duplication. Two we love are Foundation from Zurb and Bootstrap, from Twitter. When our clients need a very specialized mobile specific site, we use jQuery Mobile, especially if they require a companion app for IOS and Android devices.
In reality, the website doesn't really know exactly what type of device you are using, but in our designs, it does know the width of the display. Based upon the width of the display, the site can decide how it should display content. For small windows, say smart phones in portrait mode like the iPhone, the site will put the menu at the top of the page to save valuable screen real estate. Content will be re-ordered such that is "stacks" into the smart phone browser window, rather than having you "pinch to zoom".